内联元素和行高

Question

我感到困惑line-height的inline元素。我一直在搜索：http://www.w3.org/TR/CSS21/visudet.html#inline-non-replacedhttp://www.w3.org/wiki/CSS/Properties/line-heighthttps://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height但是我不确定我是否理解。我知道如果将display：inline-block转换为block，我可以使高度正确。但是我试图理解的是行高内联元素是如何工作的。这里是问题：我有一段文字，font-size: 15px但是如果看到浏览器的开发人员工具，它将显示18px。为什么？该font-size只是aproximate？还是不能衡量起伏？为什么背景色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生成一个内联框：

一个行内框是一个既行内和其内容参与其含有内嵌格式化的内容。display值为的不可替换元素将inline生成一个内联框。

并line-height确定该盒子的高度：

内联框的高度将所有字形及其两边的前导部分包围起来，因此正好是“行高”

因此，您的盒子实际上15px很高。

线盒高度

还有线框：

在内联格式设置上下文中，框从一个包含块的顶部开始以一个接一个的水平排列。这些框之间应注意水平边距，边框和填充。这些框可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者其中的文本基线可以对齐。包含形成线的框的矩形区域称为线框。

线框的高度由线高计算部分中给出的规则确定。

如果一个行框仅包含非替换的行内框与同line-height和vertical-align，那些规则说，行框的高度由下式给出line-height。

因此，就您而言，这也是15px。

内联框内容区域的高度

但是，您的浏览器的开发人员工具说18px。那是因为那18px是内容区域的高度。这也是由绿色背景绘制的内容区域（以及填充）。

注意，这些18px可能会有所不同，因为CSS 2.1没有指定算法：

内容区域的高度应基于字体，但是此规范未指定如何。UA可以例如使用em-box或字体的最大升序和降序。（后者将确保在em-box上方或下方具有部分内容的字形仍位于内容区域内，但是导致不同字体的大小不同的框；前者将确保作者可以控制相对于'line-height'的背景样式。 ，但会导致字形在其内容区域之外绘画。）

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

但是，大多数UA似乎都没有这样做。这意味着高度可能是font-family和中font-size使用的最高字形的高度。

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

告诉用户代理根据元素的字体将使用的值设置为“合理”的值。我们建议使用介于1.0到之间的“正常”值1.2。

这意味着，如果您使用font-size: 15px，则line-height在15px和之间将是“合理的” 18px。Firefox认为“ Verdana”字体是最好的18px。在“ sans-serif”中，它使用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属性，仅行元素的行高度和填充属性将在代码中读取行高度和填充属性将起作用

在只添加hasLayout的属性你的代码内联元素工作作为一个块级元素