css line spacing

1line-height: 20px; /* 4px +12px + 4px */
2/* OR */
3line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

1line-height: 1.5;  /* Prefered */
2
3line-height: 1.5em;
4
5line-height: 150%;
6
7line-height: 24px;

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/* Valeur avec un mot-clé */
2line-height: normal;
3
4/* Type <number> */
5/* S'il n'y a pas d'unité, cela 
6   représente un facteur multiplicateur
7   de la taille de la police appliquée à
8   l'élément */ 
9line-height: 3.5;
10
11/* Valeur de longueur */
12/* Type <length>      */
13line-height: 3em;
14
15/* Valeurs proportionnelles */
16/* Type <percentage>        */
17line-height: 34%;
18
19/* Valeurs globales */
20line-height: inherit;
21line-height: initial;
22line-height: unset;
23

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