margin-shorthand-002

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

WeasyPrint

This browser

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

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 - Two values application top, bottom and left, right</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 two values to the margin property applies the first value to the top and bottom and the second to the left and right.">
10         <style type="text/css">
11             #div1
12             {
13                 background: url('support/shorthand-002.png') -5px;
14                 border: 5px green solid;
15                 width: 200px;
16             }
17             div div
18             {
19                 background: green;
20                 margin: 10px 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>