内联元素和行高

Question

我感到困惑line-height的inline元素.我一直在寻找:

• 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

但我不确定我是否理解.我知道如果我使用display:inline-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上方或下方的部分的字形仍然落在内容区域内,但导致不同字体的不同字体的盒子;前者将确保作者可以控制相对于"行高"的背景样式,但导致在其内容区域之外绘制字形.)

如果UA实现了第一个建议,则内容高度将由font-size,它决定了em-box.绿色方块15px很高,这就是你所期望的.

但是,大多数UAs似乎都不这样做.这意味着,高度可能是最高font-family和最font-size常用的字形的高度.

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

告诉用户代理根据元素[...]的字体将使用的值设置为"合理"值.我们建议之间的"正常"使用过的值1.0来1.2.

这意味着,如果你使用font-size: 15px,一个"合理的" line-height将介于15px和之间18px.在"Verdana"字体中,Firefox认为最好的是18px; 在"sans-serif"中,它使用17px.