内联元素和行高
我inline元素的line-height感到困惑。 我一直在寻找：
- http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
- http://www.w3.org/wiki/CSS/Properties/line-height
- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
但是我不确定我是否理解。 我知道我可以使高度精确，如果我转换为块显示：内联块。 但是我试图理解的是行高内联元素是如何工作的。 以下是问题：
-
我有一个文本
font-size: 15px但如果我看到浏览器的开发工具，它使18px。 为什么？font-size只是aproximate？ 还是不衡量起伏？ -
为什么行
inline元素的背景颜色与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的元素生成一个内联框 ：
内联框是一个内联框 ，其内容参与其内联格式上下文。
display值为inline的非replace元素将生成一个内联框。
line-height决定了该框的高度 ：
内嵌框的高度包围所有的字形和它们在每一边的半边，因此正好是“行高”
因此，你的盒子实际上是15px高。
线框的高度
还有线框 ：
在内联格式化上下文中，框从一个包含块的顶部开始一个接一个地水平放置。 水平边距，边框和填充在这些方框之间。 盒子可以以不同方式垂直alignment：它们的底部或顶部可以alignment，或者它们内部的文本的基线可以alignment。 包含形成一条线的框的矩形区域被称为线框 。
线框的高度由线高计算部分给出的规则确定。
如果线框仅包含具有相同line-height和vertical-align非replace内联框，则这些规则会说线框的高度将由line-height给出。
所以在你的情况下，这也是15px 。
内联框的内容区域的高度
但是，浏览器的开发人员工具说18px 。 那是因为那18px是内容区域的高度。 这也是这个内容区域（连同填充），这是由绿色背景画。
请注意，这些18px可能会有所不同，因为CSS 2.1不指定algorithm ：
内容区域的高度应该基于字体，但是这个规范没有指定如何。 UA可以例如使用电子盒或字体的最大上行和下行。 （后者将确保具有em-box之上或之下的部分的字形仍然落在内容区域内，但是导致不同字体的不同大小的框;前者将确保作者可以控制相对于“行高”的背景样式， ，但导致在其内容区域外的字形绘画）。
如果UA执行第一个build议，则内容高度将由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>
