line-height

参考文章

1. 替换元素vs非替换元素

先讲个题外话，理解一下替换元素和非替换元素.
替换元素：浏览器根据元素的标签和属性来判断标签内容，内容的展现不由CSS控制，这类元素是一类外观渲染独立于CSS的外部对象。
例如:<input type="text">和<input type="checkbox">虽然都是input标签，但是显示的内容是明显不一样的；更多的替换元素有：<img>、<textarea>、<select>、<object>
非替换元素：除了替换元素，剩下的就都是非替换元素了。非替换元素可以直接将内容告诉浏览器。

替代行内元素的display=inline-block;
非替代行内元素的display=inline;

2. 关于line-height的各种概念

行高

相邻两行文字的基线之间的距离。

1. 对于块级元素，line-height指定了元素内部line-boxes的最小高度；

2. 对于非替代行内元素，line-height用来计算inline box的高度。

其实上面两条内容都可以总结为，line-height决定了替代行内元素的高度。

行距

行高和字体尺寸的差值称为行距（leading），leading=(line-height)-(font-size)

行高行距示意图

内容区域

内容区域由字体大小决定

内容区域

inline-box

行内框（inline-box）是包裹行内元素的模型。正常情况行内框等于内容，设置行高可以增加行内框的高度，但是背景色只填充内容不填充整个行内框。

inline-box

line-box

行框（line-box）是包裹一行元素的模型。一行元素中可能包含行高不一样的各种元素，行框高度取决于其中的最大行高。
当有多行内容是，每一行都有自己的行框。

行框和行内框

如上图，行框的高度是“若愚”的行高。

3.line-height语法

line-height可以使用的值

line-height:normal;  默认值一般是1~1.2之间
line-height:150%;    是字体大小的1.5倍，继承计算过的实际px值
line-height:10px;    固定行高
line-height:1.5;     是字体大小的1.5倍，直接继承1.5
line-height:1.5em;   是字体大小的1.5倍，继承计算过的实际px值

缩写
line-height可以和font-size缩写在font属性中，如：

font:100px/1.5 ""; 表示字体大小100px,行距1.5倍。后面的双引号一定要有，不管加不加字体名

4.行高的计算与继承

计算

• 以em、ex和%为单位的行高，其参考对象是元素本身的font-size。

  
  都是2em

• 行高可以设置的比字体小，此时多行文字会叠加到一起。

  
  文字叠在一起

继承

p { font-size :20px; line-height : 2em; }
p span { font-size : 30px; }

<p>标签中字高20px，行高设置2em，计算得行高为40px，子标签<span>继承的行高就是40px。用%做单位时，也是这样的效果。

Paste_Image.png
这样继承的问题是：当父元素和子元素中字体大小不一样时，可能会出现文字重叠的情况，如下图。

p { font-size :20px; line-height : 1em; }
p span { font-size : 30px; }

文字重叠

解决这种问题的方法是：

1. 分别设置行高（比较麻烦）；
2. 使用纯数字倍数形式来设置行高，这种倍数是可以被继承的.

p { font-size :20px; line-height : 1; }
p span { font-size : 30px; }

纯数字可以被继承