phantom-line-boxes-005.html (1569B)
1 <!DOCTYPE html> 2 <title>CSS Inline Layout Model: Phantom Line Boxes</title> 3 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes"> 5 <link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344"> 7 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> 8 <meta name="assert" content="Non-zero inline-axis margins, padding, or borders 9 prevent a line box from becoming a phantom line box, and therefore prevent 10 the inline formatting context from collapsing margins through. 11 This test checks non-zero margins that add up to zero in that axis."> 12 13 <style> 14 .wrapper { 15 float: left; 16 width: 50px; 17 background: red; 18 } 19 .wrapper.phantom { 20 background: green; 21 } 22 .wrapper > div { 23 line-height: 0; 24 background: green; 25 } 26 .wrapper.phantom > div { 27 background: red 28 } 29 .wrapper > div::after { 30 content: ""; 31 display: flow-root; 32 margin-top: 200px; 33 } 34 </style> 35 36 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 37 38 <div class="wrapper phantom"> 39 <div><span style="margin-top: 1px; margin-bottom: -1px"></span></div> 40 </div> 41 <div class="wrapper phantom"> 42 <div><span style="margin-top: -1px; margin-bottom: 1px"></span></div> 43 </div> 44 <div class="wrapper"> 45 <div><span style="margin-left: 1px; margin-right: -1px"></span></div> 46 </div> 47 <div class="wrapper"> 48 <div><span style="margin-left: -1px; margin-right: 1px"></span></div> 49 </div>