[css] line-height 、 vertical-align

line-height

行高、行距

行高是指文本行基线间的垂直距离。

基线（base line）并不是汉字文字的下端沿，而是英文字母“E”的下端沿。
意味着中文没有基线，也就更难(视觉)底部对齐。

图中两条红线之间的距离就是行高（line-height），
上一行的底线和下一行的顶线之间的距离就是行距，
而同一行顶线和底线之间的距离是font-size的大小，
行距的一半是半行距。

半行距 = （line-height - font-size）/2

半行距如果为负值（当line-height < font-size），这时候两行之间就会重叠。

严格来说上面行高是指文本行基线间的垂直距离。的结论不是完全正确的，如：

具体原因跟字体的制作有关系。

4种box

inline box(行内框)

每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框的高度等于font-size，设定line-height时，行内框的高度不变，改变的是行距。

line box(行框)

行框是指本行的一个虚拟的矩形框，由该行中行内框组成。行框也是浏览器渲染模式中的一个概念，无法显示出来。
line-box 的高度是由它所有子元素的高度计算得出的。浏览器会计算这一行里每个子元素的高度，再得出 line-box 的高度（具体来说就是从子元素的最高点到最低点的高度），所以默认情况下，一个 line-box 总是有足够的高度来容纳它的子元素。
line-box 的难点在于我们看不见它，而且不能用 CSS 控制它。

content area(内容区)

内容区是围绕着文字的一种box，无法显示出来，其高度取决于font-size 与font-family。

containing box

containing box 是包裹着上述三种box的box.

font-family不同，font-size相同高度一样可能不同。

line-height的值

值	描述
normal	默认值。行高取决于浏览器的解析，一般是1.2。子元素会单独计算。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即number为当前font-size的倍数。
length	设置固定的行间距,与 font-size 无关，不会随着 font-size 做相应比例的缩放,会被后代元素继承。
%	基于当前字体尺寸的百分比行间距。
inherit	从父元素继承 line-height 属性的值。

其他

可以这么写

font:<font-size>/<line-height>

内联格式化上下文(IFC)，和 BFC 相对应。

内联元素，其高度是基于 height、margin 和 border 属性。如果将其 height 设置为 auto 的话(height默认值是auto)，那么其高度的取值就是 line-height，其 content-area 的取值也是 line-height。

当 line-height 的值是一个数字时，其实就是相对 font-size 的倍数，而不是相对于 content-area。所以 line-height:1 很有可能使得 virtual-area 比 content-area 矮，从而引发很多其他的问题(比如字母g的下面被切了)。

vertical-align

试试这个demo

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

长度 : 通过距离升高（正值）或降低（负值）元素。'0px'等同于'baseline'.

百分值% : 通过距离（相对于1line-height值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'.

用 baseline 来对齐令人费解，用 vertical-align: middle 会不会好一点？读 CSS 文档你会发现，middle 的意思是「用父元素 baseline 高度加上父元素中 x-height 的一半的高度来对齐当前元素的垂直方向的中点」。baseline 所处的高度跟字体有关，x-height 的高度也跟字体有关，所以 middle 对齐也不靠谱。更糟糕的是，一般来说，middle 根本就不是居中对齐！内联元素的对齐受太多因素影响。

vertical-align: top / bottom，表示与 line-box 的顶部或底部对齐
vertical-align: text-top / text-bottom，表示与 content-area 的顶部或底部对齐

大部分情况下，对齐的是 virtual-area，也是一个不可见的高度

最后总结：

不管 line-height 还是 vertical-align 都不靠谱.

参考：

深入理解 CSS：字体度量、line-height 和 vertical-align

转载于:https://www.cnblogs.com/qingmingsang/articles/8372398.html