内联元素和行
我inline元素的line-height感到困惑。 我一直在寻找：
但我不确定我是否理解。 我知道我可以使高度准确，如果我转换为块显示：内联块。 但我试图理解的是行高内联元素如何工作。 以下是问题：
我有一个文本font-size: 15px但如果我看到浏览器的开发人员工具，它会使18px 。 为什么？ font-size只是近似的？ 或者它不衡量起伏？
为什么inline元素的背景颜色与height不一样line-height ？ inline元素中的line-height度量行框的空间，即上下行的空间，而不是inline元素本身。 这是解释吗？
这里就是一个例子。
CSS：
#block-element {
font-family: 'verdana', sans-serif;
font-size: 15px;
line-height: 15px;
text-decoration: none;
color: black;
margin: 0;
background-color: grey;
}
#inline-element {
-webkit-box-sizing: border-box;
font-family: 'verdana', sans-serif;
font-size: 15px;
line-height: 15px;
text-decoration: none;
color: black;
margin: 0;
background-color: green;
}<div id="block-element">
<a id="inline-element" href="#">
inline element font-size:15px but height:18px real
</a>
</div>这可能令人困惑，因为在内联格式模型中存在不同的高度。
内联框的高度
带有display: inline的元素生成一个内联框：
内联框是一个内联框，其内容参与其内联格式化上下文。 具有inline display值的非替换元素将生成一个内联框。
line-height决定了该框的高度：
内联框的高度包围所有的字形和它们在每一边的半边，因此完全是'行高'
因此，你的盒子实际上是15px高。
线框的高度
还有线框：
在内联格式化上下文中，框从一个包含块的顶部开始一个接一个地水平放置。 水平边界，边界和填充在这些框之间受到尊重。 这些盒子可以以不同方式垂直对齐：它们的底部或顶部可以对齐，或者它们内部的文本的基线可以对齐。 包含形成一条线的框的矩形区域称为线框。
线框的高度由线高度计算部分中给出的规则确定。
如果线框仅包含具有相同line-height和vertical-align非替换内联框，则这些规则表示线框的高度将由line-height给出。
所以在你的情况下，这也是15px 。
内联框的内容区域的高度
但是，浏览器的开发人员工具说18px 。 那是因为那些18px是内容区域的高度。 这也是这个内容区域（连同填充），这是由绿色背景画。
注意这些18px可能会有所不同，因为CSS 2.1没有指定算法：
内容区域的高度应基于字体，但本规范未指定方式。 UA可以例如使用电子盒或字体的最大上行和下行。 （后者将确保具有高于或低于em-box部分的字形仍然落在内容区域内，但会导致用于不同字体的不同大小的框;前者将确保作者可以控制相对于“行高”的背景样式， ，但会导致字形在其内容区域外绘画。）
如果UA执行第一个建议，则内容高度将由font-size给出，这决定了em-box。 这就是你所期望的，绿框的高度是15px 。
但是，大多数UA似乎并没有这样做。 这意味着，可能高度将是所使用的font-family和font-size最高字形的高度。
但是，使用15px的font-size值并不意味着最高的字形也将是15px高。 这取决于字体。 这有点类似于normal ， line-height的初始值，它被定义为
告诉用户代理根据元素的字体[...]将使用的值设置为“合理的”值。 我们建议在1.0到1.2之间使用“正常”值。
这意味着，如果您使用font-size: 15px ，则“合理” line-height将介于15px和18px之间。 在“Verdana”字体中，Firefox认为最好的是18px ; 在“无衬线”中，它使用17px 。
#block-element {
font-family: 'verdana', sans-serif;
font-size:15px; line-height:15px;
text-decoration: none; color:black;
margin:0;
background-color:grey;
}
#inline-element {
-webkit-box-sizing: border-box;
font-family: 'verdana', sans-serif;
font-size:15px; line-height:55px;
text-decoration: none; color:black;
margin:0;
background-color:green;
float:left;
}<div id="block-element">
<a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a>
</div>