inline-formatting-context-022

Inline boxes that are split and the margin, border, padding effect

WeasyPrint

This browser

Flags
ahem, image
Assertion
Margins, borders and padding have no visual effect when inline boxes are split.

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: Inline boxes that are split and the margin, border, padding effect</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting">
 7         <meta name="flags" content="ahem image">
 8         <meta name="assert" content="Margins, borders and padding have no visual effect when inline boxes are split.">
 9         <style type="text/css">
10             div
11             {
12                 background: url('support/inline-formatting-context-022.png') no-repeat 0 -1.5em;
13                 color: blue;
14                 font: 12pt/1em Ahem;
15                 margin-top: 2em;
16                 height: 5em;
17                 width: 6.5em;
18             }
19             span
20             {
21                 margin: 1em 0;
22                 padding: 1em;
23                 border: 0.5em solid blue;
24             }
25         </style>
26     </head>
27     <body>
28         <p>Test passes if there is no red visible on the page.</p>
29         <div>
30             <span>XXXXX XXXXX</span>
31         </div>
32     </body>
33 </html>