line-height的一点粗浅认识

line-height：有5种不同类型的单位。

line-height： normal|inherit（继承）|%（百分比）|20px（像素值）|1.2（倍数）;

将行高和字体大小结合：

 body {
 /*行高跟字体一样大小*/
 font: 100%/normal arial, helvetica, sans-serif;
 /*行高为字体大小的1.2倍*/
 font: 100%/120% arial, helvetica, sans-serif;
 /*行高20px*/
 font: 100%/20px arial, helvetica, sans-serif;
 /*行高为字体大小的1.2倍*/
 font: 100%/1.2 arial, helvetica, sans-serif;
 }

行高属性（如果父元素是行高结合字体大小，继承的属性只与父元素字体大小有关，与子元素字体大小无--使用normal和倍数除外）可以被子元素继承，这可能会使一些行距过大，一些行距过小，推荐用Eg③或Eg④的方式。行高的设定没有一个标准的方式，应该几种方式结合使用。

Eg①：

 body {
     font-size: 16px; line-height: 120%;
 }
 h1 {
     font-size: 32px;
 }
 p {
     font-size: 16px;
 }
 #footer {
     font-size: 12px;
 }

Eg②：

body {
    font-size: 16px; line-height: 20px;
}
h1 {
    font-size: 32px;
}
p {
    font-size: 16px;
}
#footer {
    font-size: 12px;
}

Eg③：

 body {
     font-size: 16px; line-height: normal;
 }
 h1 {
     font-size: 32px;
 }
 p {
     font-size: 16px;
 }
 #footer {
     font-size: 12px;
 }

这张图片应该出错了，不用乘以1.2

 body {
     font-size: 16px; line-height: 1.5;
 }
 h1 {
     font-size: 32px;
 }
 p {
     font-size: 16px;
 }
 #footer {
     font-size: 12px;
 }

最后说一下行内框和行框：

一个行内元素产生一个行内框（盒）（inline-element-box）

多个行内元素产生一个行框（此行框是看不见，也摸不到，但是它是确实存在）

行框的宽度=w1(行内框1的宽度)+w2+w3+…

行框的高度=其中最高的行内元素决定的