margin-shorthand-003

Margin shorthand - Three values application top and left, right and bottom

WeasyPrint

This browser

Flags
image
Assertion
Applying three values to the margin property applies the first value to the top the second value to the left and right and the third value to the bottom.

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 shorthand - Three values application top and left, right and bottom</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="image">
 9         <meta name="assert" content="Applying three values to the margin property applies the first value to the top the second value to the left and right and the third value to the bottom.">
10         <style type="text/css">
11             #div1
12             {
13                 background: url('support/shorthand-003.png') -5px;
14                 border: 5px green solid;
15                 width: 200px;
16             }
17             div div
18             {
19                 background: green;
20                 margin: 5px 20px 50px;
21                 height: 160px;
22             }
23         </style>
24     </head>
25     <body>
26         <p>Test passes if there is a single solid green box below and there is no red visible on the page.</p>
27         <div id="div1">
28             <div></div>
29         </div>
30     </body>
31 </html>