内联元素和行高 [英] Inline elements and line-height

问题描述

我对 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

但我不知道我是否明白。我知道，我可以使高度精确，如果我转换为块与显示：inline-block。但我试图理解是如何行高度内联元素工作。以下是问题：

• 我有一个文本 font-size：15px 但如果我看到浏览器的开发工具，它使 18px 。为什么？ font-size 只是aproximate？




• 为什么 inline 元素的背景颜色不具有与 line-height 相同的 height ？元素中的 line-height 在 inline 元素中测量行框的空间，下面，但不是 inline 元素本身。这是解释吗？

<

$ b b $ b

 ＃block-element {font-family：'verdana'，sans-serif; font-size：15px; line-height：15px; text-decoration：none;颜色：黑色; 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;颜色：黑色; margin：0; background-color：green;}  

 < div id = 块元素> < a id =inline-elementhref =＃> inline element font-size：15px but height：18px real< / a>< / div>  

$ b

解决方案

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

strong>内联框的高度

具有 display：inline 的元素会生成内嵌框：

是一个内联级别，其内容
参与其包含的内联格式化上下文。具有显示值 inline 的A
非替换元素生成
内联框。




并且 line-height 决定该框的高度：

内联框的高度包含所有字形及其$ b因此，你的盒子实际上是

$ b

还有线框：

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

确定线框的高度根据线高度计算的
部分中的规则。

如果行框只包含具有相同 line-height 和 vertical-align ，那些规则表示行框的高度将由 line-height 。 / p>

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

内嵌框内容区域的高度

但是，浏览器的开发人员工具说 18px 。这是因为 18px 是内容区域的高度。

注意这些 18px 可能因为 CSS 2.1未指定算法：

内容区域的高度应该基于字体，但是这个
规范不指定如何。 UA可以例如使用电子钱包或
字体的最大上升器和下降器。 （后者将
确保具有高于或低于em盒的部分的字形在内容区域内仍然落在
，但是导致用于
不同字体的不同大小的盒子;前者将确保作者可以控制相对于'line-height'的
背景样式，但导致字形
在其内容区域外绘制。）

如果UA实现了第一个建议，则内容高度将由 font-size ，它决定了em框。这将是你期望的，绿色框是 15px 高。

要做到这一点。这意味着，高度可能是 font-family 和 font-size use。

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

告诉用户代理在元素[...]的字体上基于
将使用的值设置为合理值。我们建议在 1.0 到到 1.2 之间使用值
'normal'。




这意味着，如果你使用 font-size：15px $ c> line-height 会在 15px 和 18px 之间。在Verdana字体中，Firefox认为最好的是 18px ;在sans-serif中，它使用 17px 。

I am confused about line-height in inline elements. I have been searching:

• 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

But I am not sure if I understand. I know that I can make the height exact if I convert to block with display:inline-block. But what I try to understand is how line-height inline elements work. Here are the questions:

• I have a text font-size: 15px but if I see the developer tools of the browser, it makes 18px. Why? The font-size is just aproximate? or it does not measure the ups and downs?

• Why the background color of the inline element does not have the same height than the line-height? The line-height in inline elements measure the space of the line box, that is the space to the line above and below, but not the inline element itself. Is that the explanation?

Here an example to play with.

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>

解决方案

This might be confusing because in the inline formatting model there are different heights.

Height of an inline box

An element with display: inline generates an inline box:

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a display value of inline generates an inline box.

And line-height determines the height of that box:

The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'

Therefore, your box is, in fact, 15px tall.

Height of a line box

There are also line boxes:

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The height of a line box is determined by the rules given in the section on line height calculations.

In case a line box only contains non-replaced inline boxes with the same line-height and vertical-align, those rules say that the height of the line box will be given by line-height.

So in your case, this is also 15px.

Height of the content area of an inline box

However, the developer tools of your browser said 18px. That's because those 18px are the height of the content area. It's also this content area (together with paddings) which is painted by the green background.

Note those 18px might vary because CSS 2.1 doesn't specify an algorithm:

The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

If an UA implements the first suggestion, the content height will be given by font-size, which determines the em-box. This would what you expected, with the green box being 15px tall.

However, most UAs don't seem to do that. That means that, probably, the height will be the height of the tallest glyph in the font-family and font-size used.

But using a font-size value of 15px doesn't mean that the tallest glyph will be 15px tall too. That depends on the font. This is somewhat analogous to normal, the initial value of line-height, which is defined as

Tells user agents to set the used value to a "reasonable" value based on the font of the element[...]. We recommend a used value for 'normal' between 1.0 to 1.2.

That means that, if you use font-size: 15px, a "reasonable" line-height would be between 15px and 18px. In the "Verdana" font, Firefox thinks the best is 18px; in the "sans-serif", it uses 17px.

这篇关于内联元素和行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！