1/* Keyword value */
2line-height: normal;
3
4/* Unitless values: use this number multiplied
5by the element's font size */
6line-height: 3.5;
7
8/* <length> values */
9line-height: 3em;
10
11/* <percentage> values */
12line-height: 34%;
13
14/* Global values */
15line-height: inherit;
16line-height: initial;
17line-height: unset;
18
1.green {
2 line-height: 1.1;
3 border: solid limegreen;
4}
5
6.red {
7 line-height: 1.1em;
8 border: solid red;
9}
10
11h1 {
12 font-size: 30px;
13}
14
15.box {
16 width: 18em;
17 display: inline-block;
18 vertical-align: top;
19 font-size: 15px;
20}
21
1<div class="box green">
2 <h1>Avoid unexpected results by using unitless line-height.</h1>
3 length and percentage line-heights have poor inheritance behavior ...
4</div>
5
6<div class="box red">
7 <h1>Avoid unexpected results by using unitless line-height.</h1>
8 length and percentage line-heights have poor inheritance behavior ...
9</div>
10
11<!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px -->
12<!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
13