在HTML中的两个块元素之间，空格或换行会被忽略吗? [英] Will whitespace or wrap be ignored between two block elements in HTML?

问题描述

直觉上，尽管我们用空格编码，但两个块标记之间的空格或换行将被忽略.如下图:

Intuitively, the space or wrap will be ignored between two block tag though we code it with the space. As follow figure:

<div>
  foo
</div>
<!-- no matter how much space or wrap when we code -->
<div>
  foo
</div>

我们知道，空格将被折叠为两个内联元素之间的一个空格.那么，block元素的规则是什么?浏览器真的忽略了它吗?

As we know, spaces will be collapsed as one space between two inline element. So what's the rule in block element? Is it really ignored by browser?

推荐答案

如果我们引用规范:

在块格式设置上下文中，框从一个包含块的顶部开始垂直地一个接一个地布置. 两个同级框之间的垂直距离由'margin'属性确定.块格式上下文中相邻块级框之间的垂直边距折叠.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

因此，只有空白可以调整两个块元素之间的距离，但我们不要忘记匿名块框，这在这里非常重要，可能对您的问题也很重要.

So only margin can adjust distance between two block elements but let's don't forget Anonymous block boxes which is very important here and probably the anwser to your question.

让我们举个例子:

.b {
 border:1px solid;
 height:50px;
}

<div>
  <div class="b"></div>


some text


<div class="b"></div>
</div>

在两个块级别之间，我们有一个匿名块，该块由规范中说明的文本形成.我们将以3块结尾:两个divs +创建的一个包含文本的匿名divs.

Between the two block level we have an Anonymous block formed by the text like explained in the specification. We will end with 3 block: the two divs + the anonymous one created that contain the text.

只有可折叠空白(即U+0020) ¹ 时，不会发生这种情况.因此，在您的示例中，两个块之间没有创建匿名块.

This will not happen when having only collapsible whitespace (i.e. U+0020)¹. So there is no Anonymous block created in your example between the two blocks.

在下面的示例中，我使用了不可折叠的空格(宽度为零的字符U+200B)，在其中您会看到块元素之间的空格，因为创建了一个包含该不可见字符的匿名块.这里又是第三个街区.从技术上讲，我们看到的空间是无形块，并且在无形块和其他两个块之间没有空间.

Below an example where I used a non collapsible whitespace (zero width character U+200B) where you will see a space between block elements because an anonymous block is created containing that invisible charater. Again a third block is in play here. Technically the space we see is that invisible block and between the invisible block and the two others there is no space.

.b {
 border:1px solid;
 height:50px;
}

body {
  animation:change 2s linear infinite;
}
@keyframes change {
  from {
    font-size:16px;
  }
  to {
    font-size:36px;
  }
}

<div>
  <div class="b"></div>
  ​
  <div class="b"></div>
</div>

您可以清楚地注意到，增加font-size会如何增加距离，因为我们正在增加匿名块中不可见字符的字体，该字体会增大，推动底部字符.

You can clearly notice how increasing the font-size will increase the distance because we are increasing the font of the invisible character inside our anonymous block which become bigger pushing the bottom one.

下面以另一种方式说明红色div替换我放置不可见字符的匿名块的位置:

Below another way to illustrate where the red div is replacing our anonymous block where I placed the invisible character:

.b {
 border:1px solid;
 height:50px;
}
.anonymous {
 background:red;
}

body {
  animation:change 2s linear infinite;
}
@keyframes change {
  from {
    font-size:16px;
  }
  to {
    font-size:36px;
  }
}

<div>
  <div class="b"></div>
  <div class="anonymous">​</div>
  <div class="b"></div>
</div>

与可折叠的空白区域相比，不会创建匿名块，并且不会分隔任何块元素.将不会创建第三个图块，只有空白可以更改间距:

Compared to collpasible white spaces no Anonymous block is created and nothing will separate our block elements. No third block will be created and only margin can change the spacing:

.b {
 border:1px solid;
 height:50px;
}

body {
  animation:change 2s linear infinite;
}
@keyframes change {
  from {
    font-size:16px;
  }
  to {
    font-size:36px;
  }
}

<div>
  <div class="b"></div>

  <div class="b"></div>
</div>

如果我们调整控制空间应该或不应该塌陷的white-space属性，默认行为也可能会更改.

The default behavior may also be changed if we adjust white-space property that control how spaces should or shouldn't collapse.

.b {
 border:1px solid;
 height:50px;
}

div {
  white-space:pre;
}

<div>
  <div class="b"></div>
  <div class="b"></div>
  
  
  
  <div class="b"></div>
</div>

¹ 可通过以下链接找到有关white-space算法的更多详细信息:

¹You can find more details about the white-space algorithm following this link: https://www.w3.org/TR/CSS2/text.html#white-space-prop

在与初始示例相关的相关部分的下方，该示例删除了所有空格:

Below the relevant part related to the initial example where all the spaced get removed:

每行都布置好

1. 如果在行首的空格(U + 0020) 已将空白"设置为正常" ，"nowrap"或"pre -line"，已删除.
2. 所有制表符(U + 0009)均以水平移位的形式呈现，该直线将下一个字形的起始边缘与下一个制表符停止点对齐.制表符停止点发生在从块的起始内容边缘开始以块字体显示的空格宽度(U + 0020)的8倍的倍数处.
3. 如果行尾的空格(U + 0020) 已将空白"设置为普通" ，"nowrap"或"pre -line"，它也会被删除.
4. 如果一行末尾的空格(U + 0020)或制表符(U + 0009)的空白"设置为预包装"，则UA可能会在视觉上折叠它们.

1. If a space (U+0020) at the beginning of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is removed.
2. All tabs (U+0009) are rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of 8 times the width of a space (U+0020) rendered in the block's font from the block's starting content edge.
3. If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.
4. If spaces (U+0020) or tabs (U+0009) at the end of a line have 'white-space' set to 'pre-wrap', UAs may visually collapse them.

这篇关于在HTML中的两个块元素之间，空格或换行会被忽略吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！