c5505-mrgn-000

margin

WeasyPrint

This browser

Flags
ahem, image

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Test: margin</title>
 5   <meta name="flags" content="ahem image">
 6   <link rel="help" href="http://www.w3.org/TR/REC-CSS1#margin">
 7   <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
 8   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
 9   <style type="text/css">
10    body { color: navy; }
11    div { font: 10px/1 Ahem; width: 200px; color: orange; }
12    img { vertical-align: bottom; }
13    .zero {margin: 0; background-color: maroon;}
14    .one {margin: 0.25in; background-color: maroon;}
15    .two {margin: 24px; background-color: maroon;}
16    .three {margin: 2.4em; background-color: maroon;}
17    .four {margin: 12%; background-color: maroon;}
18   </style>
19   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" title="8.3 Margin properties: 'margin-top',  'margin-right',  'margin-bottom', 'margin-left', and 'margin'">
20  </head>
21  <body>
22   <p>The six "matches" below should be <strong>identical and equally spaced</strong>.</p>
23   <div>
24    <p class="zero">
25        <img src="support/swatch-white.png" alt="" height="10" width="24">x<img src="support/1x1-maroon.png" alt="" height="10" width="142"><img src="support/swatch-white.png" alt="" height="10" width="24">
26    </p>
27    <p class="one">
28     x
29    </p>
30    <p class="two">
31     x
32    </p>
33    <p class="three">
34     x
35    </p>
36    <p class="four">
37     x
38    </p>
39    <p class="zero">
40        <img src="support/swatch-white.png" alt="" height="10" width="24">x<img src="support/1x1-maroon.png" alt="" height="10" width="142"><img src="support/swatch-white.png" alt="" height="10" width="24">
41    </p>
42   </div>
43  </body>
44 </html>