ÿþ<!DOCTYPE html> <title>Line box, line-height and vertical align</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> div {font-size: 500%; background: blue; margin: 0.25em 0;} .wrap {background: yellow;} .long {background: pink;} .short {background: yellowgreen;} .line-height {line-height: 112.5%;} .align .short {vertical-align: top;} </style> <h1>Line box, line-height and vertical align</h1> <p>Please take note of the span with the yellow background.</p> <div><span class="wrap"><span class="short">X pÉ</span> <span class="long">Ú<!-- U+10DA --></span> <span class="short">X pÉ</span> <span class="long">Ú<!-- U+10DA --></span></span></div> <div><span class="wrap"><span class="short">X pÉ</span> <span class="short">X pÉ</span> <span class="short">X pÉ</span></span></div> <p>With <code>line-height: 112.5%</code>.</p> <div class="line-height"><span class="wrap"><span class="short">X pÉ</span> <span class="long">Ú<!-- U+10DA --></span> <span class="short">X pÉ</span> <span class="long">Ú<!-- U+10DA --></span></span></div> <div class="line-height"><span class="wrap"><span class="short">X pÉ</span> <span class="short">X pÉ</span> <span class="short">X pÉ</span></span></div> <p>With <code>vertical-align: top</code> apllied to the boxes with lime background.</p> <div class="align"><span class="wrap"><span class="short">X pÉ</span> <span class="long">Ú<!-- U+10DA --></span> <span class="short">X pÉ</span> <span class="long">Ú<!-- U+10DA --></span></span></div> <div class="align"><span class="wrap"><span class="short">X pÉ</span> <span class="short">X pÉ</span> <span class="short">X pÉ</span></span></div> <ul> <li><a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#inline-formatting">CSS2.1 - 9.4.2 Inline formatting contexts</a></li> </ul> <ul> <li><a href="http://css-class.com/test/css/text/">Text</a></li> <li><a href="http://css-class.com/test/">CSS Class tests</a></li> </ul>