css行高与基线
背景
问题
文字段落中插有小图标icon，图标与文字等高，但是图片与文字垂直方向上不对齐。
基线
vertical-align 用来指定行内元素或表格单元格的垂直对齐方式
默认为基线对齐，而图片的基线是图片的底部
- vartical-align：top 文字顶部对齐(包括半行间距)
- vartical-align：text-top 文字顶部对齐
- vartical-align：baseline 默认对齐方式
- vartical-align：text-bottom 文字底部对齐
- vartical-align：bottom 文字底部对齐(包括半行间距)
- vertical-align：sub 使元素的基线与父元素的下标基线对齐
- vertical-align：super 使元素的基线与父元素的上标基线对齐
- vertical-align：middle 使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐
- vertical-align：(+-n)px 元素相对于基线上下偏移npx
- vertical-align：x% 相对于元素的line-height值
- vertical-align:：inherit 从父元素继承vertical-align属性的值
上述问题中，给图片设置 vertical-align：bottom 即可对齐
css | line-height
概念
- 行高
两行文字之间基线的距离。
如图，四条线的倒数第二条线就是基线。
inline-block 基线的定义：
基线是正常流中最后一个行内 box 的基线，如果这个 box 里面没有行内 box 或者 overview 的值不是 visible，那么基线就是 marginBottom 的边缘，图片与这条的思路相仿。
- 行距
上一行的底线和下一行的顶线之间的距离。
行距 = lineHeight - fontSize
fontSize 就是文字第一四条线之间的距离
取值
- normal：默认，与 font-family 和浏览器有关。
- number：一个数字n，最终行距为 n*fontSize。
- % 百分比：最终行距为 n%*fontSIze
- 带单位的值：也就是直接设置行高值
- inherit：继承
其中，百分比和带单位的值比如25em，子元素继承值时为继承计算后的值。
因为行距的计算公式，这会当父元素和子元素的 fontSize 不同时产生意料之外的结果，
而设置一个无单位的数字则传递的为计算的系数
特性
- 取大值
-
- 当子元素 lineHeight 大于父元素 lineHeight 值时，父元素的高度取大。这与 div本身的“撑开”特性相仿
- 垂直居中
-
- 在实现文字的垂直居中有言将 lineHeight 与 height 设置为相同值并不准确。应为将liheHeught 设置为 box 的高度即可，并不需要规定盒子的高度。
