【学习笔记】CSS深入理解之line-height

张鑫旭的CSS深入理解之line-height学习笔记

line-height的定义

行高：两行文字基线之间的距离

为何是基线：基线是定义所有字线的根本

不同字体和基线的距离不同，在字格中放置的样式不同

行内框盒模型

• 内容区域（content area）
• 内联盒子|行内框（inline boxes）
• 行框盒子|行宽（line boxes）
• 包含盒子（containing box）

内联盒子模型

行高决定内联盒子高度

内容区域高度只与字号和字体有关，和行高无关

行间距（vertical padding）= 行高 - 内容区域

行框高度是行内最高内联盒子到最低内联盒子的距离

line-height属性值

• normal: 和浏览器以及元素字体相关
• 数值：1.5，根据当前元素的font-size计算
• 百分比：150%，根据当前元素的font-size计算
• 具体长度：1.5em, px, rem
• inherit：input的默认行高为normal，使用inherit可更改为上下统一

1.5, 1.5em, 150%的差别

• 1.5 - 继承line-height，元素根据自身的font-size计算
• 1.5em, 150% - 设置line-height的元素计算好具体值再向下传递该值

line-height与图片

隐匿文本节点产生一个不可见的行内框，图片默认对齐基线，导致图片并非贴紧容器底边
https://codepen.io/curlywater...

line-height和height设置一致

对单行行内元素的垂直居中，有一种惯用的方法，设置line-height和height一致。
内联盒子的高度由line-height决定，height限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。
这时候由内联盒子模型可知，行间距是等分的，中间部分是content area，达到看似居中的效果。

但其实这个时候，并不是完全居中；
https://codepen.io/curlywater...
上面的例子里，增加字体大小，发现inline-block的盒子不再居中；
结合vertical-align来说明，vertical-align:middle其实是根据x字符的中心线居中，由于字符有下沉的特性，导致这条中心线并不与容器中心线重合。
内联盒子模型中，content-area的高度受font-size影响，font-size变大，content-area的空间变大，基线的位置向下，x的位置也向下偏移，两条中心线之间的差距也就越大。

可以得到结论：line-height和height设置一致，并非是完全垂直，除非font-size为0。