vertical-align-negative-leading-001-ref.html (893B)
1 <!DOCTYPE html> 2 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 3 <style> 4 .container { 5 margin: 30px 0; 6 color: orange; 7 background-color: blue; 8 line-height: 10px; 9 font-size: 30px; 10 font-family: Ahem; 11 } 12 .lh20 { line-height: 20px; } 13 .lh30 { line-height: 30px; } 14 .up5 { position: relative; top: -5px; } 15 .up10 { position: relative; top: -10px; } 16 .down5 { position: relative; top: 5px; } 17 .down10 { position: relative; top: 10px; } 18 </style> 19 <body> 20 <div class="container"> 21 <span>XX</span> 22 <span>XX</span> 23 <span>XX</span> 24 </div> 25 <div class="container lh30"> 26 <span class="up10">XX</span> 27 <span>XX</span> 28 <span class="down10">XX</span> 29 </div> 30 <div class="container"><span>XX</span></div> 31 <div class="container"><span>XX</span></div> 32 <div class="container lh20"><span class="up5">XX</span></div> 33 <div class="container lh20"><span class="down5">XX</span></div> 34 </body>