line-height 与行内框盒子模型
line-height 表示两行基线之间的距离。
所有内联元素的样式表现都与行内框盒子模型有关。
行内框盒子模型
“内容区域(content area)”，是一种围绕文字看不见的盒子。“内容区域”的大小与
font-size的大小有关。“内联盒子(inline boxes)”，不会让内容成块显示，而是排成一行。如果外部含
inline水平的标签(span,a,em等)，则属于“内联盒子”，如果只有文字，则属于“匿名内联盒子”。“行框盒子(line boxes)”，每一行就是一个“行框盒子”，每个“行框盒子”又是由一个个“内联盒子组成”。
“包含盒子(containing box)”，即基本的 block 盒子，由一行行“行框盒子”组成，如
<p>标签所在的就是“包含盒子”。
line-height各类属性值
- normal
默认属性值，不同浏览器不同，且与元素字体关联。 - <number>
使用数值，如1.5，与当前元素的font-size值相乘计算。 - <length>
使用具体的长度值，如1.5em/20px等 - <percent>
使用百分比，如150%。 - inherit
继承，input等元素默认行高是normal，使用inherit可以让文本框样式更可控。
line-height: 1.5|150%|1.5em 的区别
在计算值上没有差别都是和font-size值相乘。但在应用元素上有差别：
line-height: 1.5所有可继承元素根据自身font-size重计算行高；line-height: 150%/1.5em当前元素根据font-size计算行高，继承给下面的子元素，子元素不再进行计算。
body 全局设置数值行高最佳实践
body{font-size:14px;line-height:?}
匹配 20px 方便计算。line-height = 20px/14px =1.42857...
body{font-size:14px;line-height:1.4286;} /*兼容chrome 向上取整*/
line-height的高度机理
line-height由于其继承性，影响无处不在，即使单行文本也不例外。
内联盒子的高度是由line-height决定的，通过改变行间距的大小，保证了高度正好等于行高，内容区域高度 + 行间距 = line-height。但高度的表现不是line-height，而是内容区域和行间距，所以为什么只有一行也有line-height。
内容区域高度只与
font-size及font-family有关，与line-height无关。在宋体字体下，内容区域高度等于
font-size值，所以font-size+ 行间距 =line-height。
行框盒子(line boxes)里有多个不同行高的内联盒子时
分两种情况，如下图所示：
-
第一种情况
-
第二种情况
行框盒子(line boxes)里混入 inline-block的元素(如图片)
消除图片底部间隙的方法：
- 图片块状化——无基线对齐
img { display: block; }
- 图片底线对齐
img { vertical-align: bottom; }
- 行高足够小——基线位置上移
.box { line-height: 0; }
line-height 实际应用
图片水平垂直居中
.box { line-height: 300px; text-align: center; }
.box > img { vertical-align:middle; } /* middle 基线往上1/2x高度*/
多行文本垂直水平居中
.box { line-height: 250px; text-align: center; }
.box > .text {
display:inline-block; line-height: normal;
text-align: left; vertical-align: middle;
}
