vertical-align-negative-leading-001.html (1205B)
1 <!DOCTYPE html> 2 <title>Test vertical-align: top and bottom do not affect the line height</title> 3 <link rel="match" href="vertical-align-negative-leading-001-ref.html"> 4 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align"> 5 <link rel="author" href="mailto:kojii@chromium.org"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 .container { 9 margin: 30px 0; 10 color: orange; 11 background-color: blue; 12 line-height: 10px; 13 font-size: 30px; 14 font-family: Ahem; 15 } 16 span { background: purple; } 17 .top { vertical-align: top; } 18 .bottom { vertical-align: bottom; } 19 .text-top { vertical-align: text-top; } 20 .text-bottom { vertical-align: text-bottom; } 21 </style> 22 <body> 23 <div class="container"> 24 <span class="top">XX</span> 25 <span>XX</span> 26 <span class="bottom">XX</span> 27 </div> 28 <div class="container"> 29 <span class="text-top">XX</span> 30 <span>XX</span> 31 <span class="text-bottom">XX</span> 32 </div> 33 <div class="container"><span class="top">XX</span></div> 34 <div class="container"><span class="bottom">XX</span></div> 35 <div class="container"><span class="text-top">XX</span></div> 36 <div class="container"><span class="text-bottom">XX</span></div> 37 </body>