深入剖析 CSS：字体度量、行高和垂直对齐( 五 )

文章图片
具有不同行高的结果。文本始终位于中间现在，添加高度与字母“B”匹配的图标变得容易：
span::before{content:'';display:inline-block;width:calc(1px*var(--capital-height));height:calc(1px*var(--capital-height));margin-right:10px;background:url('https://cdn.pbrd.co/images/yBAKn5bbv.png');background-size:cover;}

文章图片
图标和B字母的高度相同在JSBin中查看结果
请注意，此测试仅用于演示目的。你不能依赖这个。原因有很多：
除非字体度量是恒定的，浏览器中的计算不是?*（ツ）*/?
如果未加载字体，则回退字体可能具有不同的字体指标，并且处理多个值将很快变得非常难以管理
要点
我们学到了什么：
内联格式上下文真的很难理解
所有内联元素都有2个高度：
内容区域（基于字体指标）
虚拟区域(line-height)
毫无疑问，这两个高度都无法想象。（如果你是一个devtools开发人员，并且想从事这项工作，那可能会很棒）
line-height:normal基于字体指标
line-height:n可以创建一个小于*内容区域的*虚拟区域
vertical-align不是很可靠
行框的高度是根据其子级和属性计算的line-heightvertical-align
我们无法使用CSS轻松获取/设置字体指标
但我仍然喜欢CSS:)