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
网友评论