2018-04-06 IFC（BFC的兄弟）

IFC：inline formatting content

font-size到底是什么

image.png

font-size是字体模具的高度，是em-square

image.png
image.png

line-height又是什么意思呢？ ：内联元素真实的占地高度

image.png
image.png image.png

字体变了

如果没有写line-height具体值，那么这个line-height是多少呢？normal
是设计师给的高度

image.png

接下来是vertical-align

image.png
image.png

top指的是2个不同字体的实际占地面积的上面的top对齐

image.png
baseline 所处的高度跟字体有关，x-height 的高度也跟字体有关，所以 middle 对齐也不靠谱。更糟糕的是，一般来说，middle 根本就不是居中对齐！ image.png

5像素是怎么来的？

image.png

跟基线（看不见的）对齐，没有x也是这样

image.png

这样图片下面就没有空隙了

image.png

要想让这两个对齐，用vertical-align基本是靠运气，换一个浏览器，默认字体变了，对齐也变了

image.png

方法一：用flex

image.png

两个inline元素之间是有空格的（因为有回车）
用flex可以解决
直接父元素display:flex
或者用float来解决

image.png

https://zhuanlan.zhihu.com/p/25808995