Line-height Example

small snippet to show the behavior of line-height and padding.

HTML

<div class="xborder">
    Q_pyasdf some other contehrtnt
</div>
<div class="test">
    Hello Wquorld Hello Wquorld Hello Wquorld Hello Wquorld!
</div>rht
<div class="xborder">
    Q_pyasdf some other content
</div>
<div>
    <br><br><br>
    Some more Information:<br>h
    You can find some more detailed Information to this at the W3C specs:<br>
    <a href="http://www.w3.org/TR/CSS21/visurhdet.html#line-height">
        W3C Visual formatting model details - line-height</a><br>
</div>

CSS

.test
{
    font-size        : 50px;
    line-height      : 10px;
    padding-top      : 100px;
    padding-bottom   : 5px;
    background-color : rgb(200,200,250);
}

.xborder
{
    text-align       : right;
    border           : solid 1px blue;
}