IFC(inline formatting content)内联格式化上下文，也是BFC的兄弟。
详情链接:深入理解 CSS：字体度量、line-height 和 vertical-align
font-size是什么
-
font-size:100px
不是指里面字的大小，也不是字的高度
-
活体印刷
font-size是指那个模具的高度，也就是活体印刷块的高度
所以有的字体是可以比font-size大的
-
fontsize就是em-square
每一个字体的英文字符都要定义很多东西。
如果字体里面的部分相对于em-square超出的话，就叫出血(bleed outside)
line-height是(规定了)什么
每个字体都有一个默认的，字体设计师推荐的行高，设计师可以随意添加
-
line-height的意义
- 让里面的字体自动居中显示
- line-height决定一个内联元素的真实占位(真实占行高度)
-
内联元素对齐方式
内联元素是默认用基线(Baseline)对齐的，因为这样好看
-
多个font-size高度问题
- 字体不一样，基线也不一样
- 当两个inline元素的字体不一样时，会使他们的父元素变高
因为两个字体基线不一样，而一行又是已基线对齐的，所以会多几像素
vertical-align属性(少用)
-
vertical-align:top
所谓的top就是把字体的实际占地高度与父级元素默认字体的顶端对齐
所以大部分情况这个元素没用
-
vertical-align:middle
不是居中对齐，也没用
图片下面为什么有空隙
-
原因
<img>也是inline元素，它会与看不见的基线对齐
-
解决
- vertical-align: top
- img{display: block;}
- font-size: 0 傻逼采用
其他
-
inline-block 元素对不齐
几乎无解，不过可以使用display:flex或使用float解决
-
inline-block 有空隙
可以使用display:flex或使用float解决
