flexbox-baseline-multi-item-vert-001-ref.html (1292B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Reference case, using inline-block instead of inline-flex, and with the 7 inline-blocks manually positioned with "vertical-align:top" and 8 margin-top. 9 --> 10 <html> 11 <head> 12 <title>CSS Reftest Reference</title> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 14 <meta charset="utf-8"> 15 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 16 <style> 17 body { 18 margin: 0; 19 font: 20px Ahem; 20 line-height: 20px; 21 /* Baseline is 0.8em = 16px from top */ 22 } 23 .flexContainer { 24 display: inline-block; 25 background: lightblue; 26 } 27 .smallFont { 28 font-size: 10px; 29 line-height: 10px; 30 /* Baseline is 0.8em = 8px from top */ 31 } 32 .bigFont { 33 font-size: 20px; 34 line-height: 20px; 35 /* Baseline is 0.8em = 16px from top */ 36 } 37 * { vertical-align: top } 38 </style> 39 </head> 40 <body> 41 a 42 <div class="flexContainer" style="margin-top: 8px"> 43 <div class="smallFont">b</div 44 ><div class="bigFont">c</div> 45 </div> 46 <div class="flexContainer"> 47 <div class="bigFont">d</div 48 ><div class="smallFont">e</div> 49 </div> 50 </body> 51 </html>