12IFC

内联格式化上下文
font-size 相同，font-family 不同，得到的 span 元素的高度也不同
原因在于字体本身，这是字体的原理：一款字体会定义一个 [em-square]，它是用来盛放字符的金属容器，字体度量都是基于这个相对单位设置的(注意这里面的值是允许相对于 em-square 出血的)
em-square 一般被设定为宽高均为 1000 相对单位(也可以是 1024、2048 相对单位)，1000 相对单位会按照你需要的 font-size 缩放。

font-size em-square
line-height 实际占地高度
100px 100px -> 103px
vertical top middle bottom text-top text-bottom
图片下面有空隙
1、vertical-align: top
2、img{display: block;}
3、font-size: 0 傻逼采用
inline-block 元素对不齐 ——无解 —— 用 flex 或 float
inline-block 有空隙 ——用 flex 或 float