line-height与vertical-align
Last updated
Last updated
行高(line-height)是指文本行基线间的垂直距离。
行距是上一行的底线和下一行的顶线之间的距离，行距的一半是半行距。
半行距为负时(当line-height < font-size)，这时候两行之间就会重叠。
如果父元素的line-height有单位（px、%）,那么子元素继承的值则是父元素计算后的一个具体的px级别的值；
以下，P得到的是10px*150%=15px的行高，而P的字体大小为30px，所以发生了重叠。
1232 123
而如果没有单位，子元素就会根据自己的字体大小，与父元素的行高数值计算自己的行高。
css中起高度作用的应该就是height以及line-height。
效果:
line-height的最终表现是通过line boxes实现的，而无论line boxes所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容共用水平线的
inline box(行内框):每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框的高度等于font-size，设定line-height时，行内框的高度不变，改变的是行距。
line box(行框):指本行的一个虚拟的矩形框，由该行中行内框组成。行框也是浏览器渲染模式中的一个概念，无法显示出来。等于最上行内框顶部到最下行内框底部的距离(保证足以容纳它所包含的所有inline-box)。当有多行内容时，每一行都有自己的行框。
content area(内容区):内容区是围绕着文字的一种box，无法显示出来，由text-top与text-bottom包裹，其高度取决于font-size。
containing box :包裹着上述三种box的box。
baseline:box的baseline与parent box的baseline对齐；如果该box没有baseline，则该box的底外边缘与parent box的baseline对齐；
middle：box的垂直中点与parent box的基线与parent box中小写字母x高度的一半的和对齐；
sub：降低box的基线到合适的位置来作为parent box的下标；
super:升高box的基线到合适的位置来作为parent box的上标；
text-top:box的top与父容器的内容区的顶部对齐；
text-bottom:box的bottom与父容器的内容区的底部对齐；
font-size的大小决定text-top到text-bottom之间的位置,line-height的大小决定top与bottom的位置。
参考： 1. 深入了解CSS字体度量，行高和vertical-align 2. http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 3. https://sinaad.github.io/xfe/2016/04/15/css-line-height/ 4. css行高line-height的一些深入理解及应用--张鑫旭 5. 详解CSS行高 6. W3C标准--建议阅读
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
baseline:元素基线与父元素的基线对齐。
sub:元素基线与父元素的下标基线对齐。
super:元素基线与父元素的上标基线对齐。
text-top:元素顶端与父元素字体的顶端对齐。
text-bottom:元素底端与父元素字体的底端对齐。
middle:元素中线与父元素的小写x中线对齐。
< length>:元素基线超过父元素的基线指定高度。可以取负值。
< percentage>:同 < length> , 百分比相对于 line-height。
以下两个值是相对于整行来说的：
top：元素及其后代的顶端与整行的顶端对齐。
bottom：元素及其后代的底端与整行的底端对齐。
父元素取值table-cell元素:
baseline (and sub, super, text-top, text-bottom, , and )
与同行单元格的基线对齐。
top
单元格的内边距的上边缘与行的顶端对齐。
middle
单元格垂直居中。
bottom
单元格的内边距的下边缘与行的底端对齐。
上图所示线条从上到下为：
