css/css-values/absolute-length-units-manual.html

<!DOCTYPE html>
<html>
<!-- Submitted from TestTWF Paris -->
<head>

  <meta charset="UTF-8">

  <title>CSS Values and Units Test: elements should be the real world size given in mm, cm, inches...</title>
  <link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
  <link rel="help" href="https://www.w3.org/TR/css3-values/#absolute-lengths" title="5.2 Absolute lengths: the cm, mm, Q, in, pt, pc, px units">

  <style type="text/css">

    .s1mm { background-color: fuchsia; width: 1mm; height: 1mm; }
    .s10mm { background-color: olive; width: 10mm; height: 10mm; }
    .s1cm { background-color: orange; width: 1cm; height: 1cm; }
    .s254cm { background-color: gray; width: 2.54cm; height: 2.54cm; }
    .s1in { background-color: blue; width: 1in; height: 1in; }

    .inline { float: left; }

    .newline { clear: left; }

    p { clear: both; margin: 10px 0; }

  </style>

</head>
<body>

<p>
  There should be a 1mm (width) by 1mm (height) fuchsia square:
</p>

<div class="s1mm"></div>

<p>
  There should be a 10mm (width) by 1mm (height) fuchsia stripe:
</p>

<div class="s1mm newline inline"></div>
<div class="s1mm inline"></div>
<div class="s1mm inline"></div>
<div class="s1mm inline"></div>
<div class="s1mm inline"></div>
<div class="s1mm inline"></div>
<div class="s1mm inline"></div>
<div class="s1mm inline"></div>
<div class="s1mm inline"></div>
<div class="s1mm inline"></div>

<p>
  There should be a 10mm (width) by 10mm (height) olive square:
</p>

<div class="s10mm newline "></div>

<p>
  There should be a 1cm (width) by 1cm (height) orange square. So, same width above:
</p>

<div class="s1cm newline "></div>

<p>
  There should be a 2.54cm (width) by 2.54cm (height) gray square:
</p>

<div class="s254cm newline "></div>

<p>
  There should be a 1in (width) by 1in (height) blue square. So, same width as above:
</p>

<div class="s1in"></div>

</body>
</html>