Question

我对line-height元素中的inline感到困惑。我一直在寻找：

但我不确定我是否理解。我知道如果我使用display：inline-block转换为块，我可以使高度准确。但我试图理解的是行高内联元素的工作原理。以下是问题：

我有一个文字font-size: 15px，但如果我看到浏览器的开发者工具，就会生成18px。为什么？ font-size只是近似？或者它不衡量跌宕起伏？
为什么inline元素的背景颜色与height不具有相同的line-height？ line-height元素中的inline会测量线框的空间，即上下行的空间，而不是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>

Answer 1

这可能会令人困惑，因为在内联格式化模型中有不同的高度。

内嵌框的高度

display: inline元素生成inline box：

内联框是内联级别及其内容的框架参与其包含内联格式上下文。一个 display值为inline的未替换元素会生成一个内联框。

line-height确定height of that box：

内联框的高度包含所有字形及其字符因此，每一边都是半导，因此正好是行高

因此，您的邮箱实际上是15px高。

线框高度

还有line boxes：

在内联格式化上下文中，框是水平布局的，一个   在另一个之后，从包含块的顶部开始。   这些之间会考虑水平边距，边框和填充   框。盒子可以以不同的方式垂直对齐：它们   底部或顶部可以对齐，或者其中的文本基线   可以对齐。包含形成框的矩形区域   一行称为行框。

线框的高度由中给出的规则决定   关于line height calculations的部分。

如果某个行框仅包含具有相同line-height和vertical-align的未替换内联框，则这些规则会说明行框的高度将由line-height给出。

所以在你的情况下，这也是15px。

内联框内容区域的高度

但是，浏览器的开发者工具说18px。这是因为那些18px是内容区域的高度。它也是这个内容区域（连同填充物），由绿色背景绘制。

请注意，18px可能因CSS 2.1 doesn't specify an algorithm：

而有所不同

内容区域的高度应该基于字体，但是这样规范没有具体说明。 UA可以例如使用em-box或字体的最大上升和下降。（后者会确保包含em-box上方或下方部分的字形仍然下降在内容区域内，但导致不同大小的框不同的字体;前者会确保作者可以控制相对于＆＃39; line-height＆＃39;的背景样式，但会导致字形在他们的内容区域之外绘画。）

如果UA实施了第一个建议，则内容高度将由font-size给出，这决定了em-box。这将是您所期望的，绿色框为15px高。

然而，大多数UAs似乎都不这样做。这意味着，高度可能是font-family和font-size中使用的最高字形的高度。

但使用font-size 15px值并不意味着最高的字形也会15px高。这取决于字体。这有点类似normal，line-height的初始值，定义为

告诉用户代理将使用的值设置为＆＃34;合理的＆＃34;基于价值在元素的字体上[...]。我们建议使用的值＆＃39;正常＆＃39;在1.0到1.2之间。

这意味着，如果您使用font-size: 15px，那么＆＃34;合理的＆＃34; line-height位于15px和18px之间。在＆＃34; Verdana＆＃34;字体，Firefox认为最好的是18px;在＆＃34; sans-serif＆＃34;中，它使用17px。

Answer 2

#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>

**和你在块元素上的行高工作应用行高200px你的元素高度为200px，你的内部元素高于200px高度**

内联元素无法读取高度和填充顶部和底部我们需要读取此属性我们必须应用任何具有布局属性，如float，display：inline-block或block

只有块元素是读取行高和填充属性在你的代码中，如果你添加float：left或disply：block css属性add line-height和padding将正常工作

在您的代码中仅添加haslayout属性，您将内联元素用作块元素

内联元素和行高

2 个答案: