margin-inline-002

Margin-top and margin-bottom on inline elements

WeasyPrint

This browser

Assertion
Applying margin-top and margin-bottom to an inline element has no effect.

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-top and margin-bottom on inline elements</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#margin-properties">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="Applying margin-top and margin-bottom to an inline element has no effect.">
 9         <style type="text/css">
10             div
11             {
12                 border: blue solid;
13             }
14             span
15             {
16                 background: orange;
17                 margin-top: 20px;
18                 margin-bottom: 20px;
19             }
20         </style>
21     </head>
22     <body>
23         <p>Test passes if the top and bottom of the orange box is touching the inner edges of the blue box, and there is no margin (space) above or below the orange box.</p>
24         <div>
25             <span>Filler Text</span>
26         </div>
27     </body>
28 </html>