为什么线盒之间有间距，而不是由于一半的引线间距? [英] Why is there space between line boxes, not due to half leading?

问题描述

在下面的代码示例中，您将看到垂直流动的spans之间的空白.空格位于每个线框之间.

In the code example below, you will see white-space between the vertically flowing spanss. The white space is between each line box.

首先，我想说这与inline-block框之间的间隙无关，甚至与

I want to start out by stating that this has nothing to do with gaps between inline-block boxes or even a result of half leading, which is added on top and bottom of an inline level box when calculating minimum line height.

根据 CSS2.1规范:

内联框的高度围住所有字形及其轮廓 半边领先，因此恰好是线高".

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

并且:

(线框的)最小高度由基线以上的最小高度和基线以下的最小深度组成.

The minimum height (of a line box) consists of a minimum height above the baseline and a minimum depth below it....

注释:

• background-color(如下面的示例所示)覆盖了整个行框
• 尽管如此，每个线框之间仍然存在空白
• 我不是在寻求解决方案以消除差距.如果我想这样做，只需在span
上设置display: inline-block

• background-color (as seen in the below example) covers the full line box
• Despite that, there is still white-space between each line box
• I am not asking for a solution to remove the gap. If I wanted to do that, I would just set display: inline-block on the span

为什么存在差距，并以 CSS2为基础. 1个规范.规范的哪一部分解释了间距?

Why is the gap there, with basis in the CSS2.1 specification. What part of the spec explains that spacing?

示例代码:

// From CSS spec:
// The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'. Boxes of child elements do not influence this height.

span {
  background-color: red;
  line-height: 1;
}

<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>

推荐答案

背景属性仅适用于内容区域，不适用于行框.在大多数情况下，内容区域由height定义.正如我们可以阅读规范中的 :

The background properties applies only to the content area and not the line box. In most of the cases the content area is defined by the height. As we can read in the specification:

盒子内容区域的尺寸-内容宽度和 内容高度-取决于以下几个因素:元素是否 生成设置了'width'或'height'属性的盒子，无论 该框包含文本框还是其他框，无​​论该框是表格还是其他表格.

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc.

此处:

此属性指定盒子的内容高度.

This property specifies the content height of boxes.

此属性不适用于不可替换的内联元素.见 计算非替换内联的高度和边距的部分 代替所使用规则的元素.

This property does not apply to non-replaced inline elements. See the section on computing heights and margins for non-replaced inline elements for the rules used instead.

如果检查上面的链接，我们可以阅读:

And if check the above link we can read:

"height"属性不适用.内容区域的高度 应基于字体，但此规范未指定 如何. UA可以例如使用em-box或字体的最大升序和降序.

The 'height' property does not apply. 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.

这里是一个插图，可以更好地向您显示 ^ref :

Here is an illustration to better show you^ref:

内容区域是由浏览器定义的，在某些情况下，它可以是您在上图中看到的em ¹ ，但不是必需的.

The content area is defined by the browser and in some case it can be the em¹ that you see in above figure but not necessarely.

在所有情况下，无论如何line-height，内容区域将仅取决于字体属性.因此，line-height定义行框的高度，内容区域的高度由字体属性定义.

In all the cases and whataver the line-height will be, the content area will only depend on the font properties. So the line-height define the height of the line box AND the content area height is defined by the font properties.

真正的问题是:为什么默认情况下line-height不能使行框等于内容区域?

So the real question is: Why by default the line-height doesn't make the line box equal to the content-area?

如果选中，我们将检查文档可以看到默认值设置为normal并且:

If check we check the documentation we can see that the default value is set to normal and:

正常

取决于用户代理.桌面浏览器(包括Firefox) 使用大约1.2的默认值，具体取决于元素的 字体家族.

Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

然后

<number>(无单位)

使用的值是该无单位<number>乘以元素自己的字体大小.

The used value is this unitless <number> multiplied by the element's own font size.

在某些情况下，我们的行框会比内容区域大一些，以说明间隙. ¹

In some cases, we will have the line box a bit bigger than the content area which explain the gap.¹

现在为什么将line-height设置为1不能解决问题?

Now why setting the line-height to 1 doesn't fix the issue?

仅因为设置跨度的line-height而不是其容器的line-height是不够的.容器的line-height仍是默认的1.2，因为它比1大，因此将被考虑.换句话说，最大的line-height将获胜.

Simply because you set the line-height of the spans and not the line-height of their container which is not enough. The line-height of the container is still the default one 1.2 which will be considered since it's bigger than 1. In other words, the biggest line-height will win.

这里有一些插图可以更好地理解:

Here is some illustration to better understand:

主体的线高为2，并且只有较大的跨度线高才会起作用:

line-height of the body is 2 and only a bigger line-height for span will have an effect:

body {
 line-height:2
}

span {
  background-color: red;
  line-height: 1;
  animation:change linear infinite 2s alternate;
}

@keyframes change {
  to {line-height:3}
}

<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>

将line-height设置为body就足够了，因为span会继承它:

Setting line-height to body is enough as the span will inherit it:

body {
 line-height:1; /*line-height is equal to content area*/
}

span {
  background-color: red;
}

<span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>

¹ 值得注意的是，在某些情况下，对于某些特定字体，您可能看不到任何间隙，甚至不需要将line-height设置为1，因为内容区域由于这两个值的计算是独立的，因此可能足够大以覆盖行框.

¹ Worth to note that in some cases and for some particular font, you may not see any gap and you won't even need to set line-height to 1 because the content area may be bigger enough to cover the line box since the calculation of both value are independent.

这里有一些例子

span {
  background-color: red;
}
div {
 margin:5px;
}

<div><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>
<div style="font-family:cursive"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>

<div style="font-family:monospace"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>

<div style="font-family:sans-serif"><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span><br/><span>Some span. As seen, background covers font plus half leading on top/bottom. There is still a gap, which is due to something else.</span>
</div>

我们仅在第一个和最后一个示例中存在空白.

We have gaps only for the first and last example.

这篇关于为什么线盒之间有间距，而不是由于一半的引线间距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！