margin-004

Margin set to using four values

WeasyPrint

This browser

Assertion
The 'margin' property set using three values properly assigns the first value to the top margin, the second value to the left margin, the third value to the bottom margin, and the fourth value to the right margin.

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 set to using four values</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin">
 7         <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties">
 8         <meta name="flags" content="">
 9         <meta name="assert" content="The 'margin' property set using three values properly assigns the first value to the top margin, the second value to the left margin, the third value to the bottom margin, and the fourth value to the right margin.">
10         <style type="text/css">
11             #wrapper
12             {
13                 position: relative;
14             }
15             #div1, #div2
16             {
17                 border: 10px solid green;
18             }
19             #div1, #reference
20             {
21                 left: 0;
22                 position: absolute;
23                 top: 0;
24             }
25             #div2
26             {
27                 margin: 2.54cm 0.25in 144pt 12.7mm;
28                 height: 1in;
29                 width: 3in;
30             }
31             #reference
32             {
33                 border: 10px solid red;
34                 height: 404px;
35                 width: 380px;
36             }
37         </style>
38     </head>
39     <body>
40         <p>Test passes if there is no red visible on the page.</p>
41         <div id="wrapper">
42             <div id="reference"></div>
43             <div id="div1">
44                 <div id="div2"></div>
45             </div>
46         </div>
47     </body>
48 </html>