inline-block-baseline-015.html (2151B)
1 <!DOCTYPE html> 2 <title>Vertical-align: baseline of inline-block with phantom line box</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css2/#leading"> 5 <link rel="help" href="https://drafts.csswg.org/css2/#inline-formatting"> 6 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> 7 <meta name="assert" content=" 8 From https://drafts.csswg.org/css2/#leading 9 > The baseline of an inline-block is the baseline of its last line box in the normal flow, 10 > unless it has either no in-flow line boxes or if its overflow property has a computed 11 > value other than visible, in which case the baseline is the bottom margin edge. 12 13 Here we have 2 inline-blocks. The 1st one is completely empty, so it baseline is its 14 bottom margin edge. The 2nd one has an empty span followed by a block. 15 16 The span would typically be placed in a line box. However, it's a phantom line box. 17 From https://drafts.csswg.org/css2/#inline-formatting 18 > Line boxes that contain no text, no preserved white space, no inline elements with 19 > non-zero margins, padding, or borders, and no other in-flow content (such as images, 20 > inline blocks or inline tables), and do not end with a preserved newline must be 21 > treated as zero-height line boxes for the purposes of determining the positions of 22 > any elements inside of them, and must be treated as not existing for any other purpose. 23 24 So for the purpose of finding the baseline of the 2nd inline-block we ignore the phantom 25 line box, and thus the baseline is also the bottom margin edge. 26 27 Therefore, the inline-blocks should have their bottom margin edges aligned. 28 "> 29 30 <style> 31 .wrapper { 32 width: 200px; 33 background: red; 34 line-height: 0; 35 font-size: 0; 36 } 37 .green { 38 width: 100px; 39 height: 200px; 40 background: green; 41 } 42 .inline-block { 43 display: inline-block; 44 } 45 </style> 46 47 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 48 49 <div class="wrapper"> 50 <div class="inline-block green"></div> 51 <div class="inline-block"> 52 <span></span> 53 <div class="green"></div> 54 </div> 55 </div>