对于行内元素如em、strong、span和等，其padding、margin、border-top、border-bottom 不会增加行高。padding会覆盖；margin将重置为0；border-top和border-bottom同样会覆盖。padding-left、padding-right、border-left和border-right可用。
img元素会影响行高
证明撑开div高度的是line-height而不是font-size
内联盒子/匿名内联盒子inline-boxes
行框盒子line-boxes 每一行就是一个“行框盒子”，每“行框盒子”由一个个“内联盒子组成”
包含盒子containing-box，由一行行的“行框盒子”组成
内容区域content-area，一种围绕文字看不见的盒子，大小与font-size大小有关
1.行高的垂直居中性
、、在单行或多行或图片垂直居中实现上的应用
单行文字的垂直居中对齐： line-height值设置为height一样大小的值可以实现单行文字的垂直居中；height值可以省略
多行文字的垂直居中对齐 ： 要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。
、 、图片的垂直居中
类似上面处理的方法，借助 i标签或伪元素
、 、使用缩放因子
顶线和底线包含的区域
每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域。 设定行高时行内框高度不变，半行距分别增加/减少到 行框 的上下两边。 简单说来，行内框就是行内元素的边框。
行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值。当有多行内容时，每行都会有自己的行框。
设置行高的属性： line-height
比如一段文本：
这里绿色框之间的距离，为行间距， 行间距 = 行高 - 字体大小
我们利用行高，还可以做单行文字在父元素中居中的效果，这里只需要讲行高的高度设置为跟父元素高度一样大小即可。但是这里需要注意的是，这里只对当行文本有效果，多行文本不行。
test.css
test.html
注意
设置行高时，有一个地方需要注意，当line-height属性与font属性合用时，要使line-height设置的高度生效，line-height的声明位置要在font之后。因为font有默认的行高，比如 {font: 10px/100px, "微软雅黑"} 。如果line-height在font之前就声明了，那么在font中会覆盖line-height的值。
test.css
修改后的test.css
当然，也可以直接这样：
