line height

HTML

<h1>Line height test</h1>

<div class="a">
    A) font: 16px, line height: 1em
    <div class="b child">
        B) 16px, 5.3
    </div>
    <div class="c child">
        C) 50px, 5.3
    </div>
    <div class="d child">
        D) 50px, 5.3em
    </div>
</div>

CSS

body { font-family: sans-serif; }

.child { margin-left: 10px; }
.a { font-size: 16px; line-height: 1em; background-color: pink; }
.b { font-size: 16px; line-height: 100; background-color: lightblue; }
.c { font-size: 50px; line-height: 5.3; background-color: peachpuff; }
.d { font-size: 50px; line-height: 5.3em; background-color: lightgreen; }