HTML中的两个块元素之间是否会忽略空格或换行？

Question

直观地说，虽然我们用空格编码，但是在两个块标记之间将忽略空格或换行。如下图：

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

众所周知，空格将作为两个内联元素之间的一个空格折叠。那么块元素的规则是什么？它真的被浏览器忽略了吗？

Answer 1

如果我们引用the specification：

在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”属性决定。块格式化上下文中相邻块级框之间的垂直边距折叠。

因此，只有边距可以调整两个块元素之间的距离，但我们不要忘记匿名块框，这在这里非常重要，可能是你问题的回答。

我们来看这个例子：

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

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


some text


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

在两个块级之间，我们有一个由文本形成的匿名块，如规范中所述。我们将以3个块结束：两个div +创建的包含文本的匿名。

只有可折叠的空白（即U+0020）1时才会发生这种情况。因此，在两个块之间的示例中没有创建匿名块。

在我使用不可折叠的空格（零宽度字符U+200B）的示例下面，您将在块元素之间看到空格，因为创建了包含该不可见字符的匿名块。这里还有第三个块。从技术上讲，我们看到的空间是看不见的块，在看不见的块和其他两个块之间没有空间。

.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会增加距离的原因是因为我们增加了我们匿名块中隐形字符的字体，这个字体变得更大，推动了底层字符。

下面另一种方式来说明红色div替换我放置隐形字符的匿名块的位置：

.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>

与可折叠的空格相比，不会创建匿名块，也不会分隔我们的块元素。不会创建第三个块，只有边距可以更改间距：

.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属性，也可以更改默认行为。

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

div {
  white-space:pre;
}

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

1您可以在此链接中找到有关white-space算法的更多详细信息：https://www.w3.org/TR/CSS2/text.html#white-space-prop

在与初始示例相关的相关部分下方，其中所有间距都被移除：

每条线都布置好了，

1. 如果一行开头的空格（U + 0020）将“white-space”设置为“normal”，“nowrap”或“pre-line”，则会将其删除。
2. 所有选项卡（U + 0009）都呈现为水平移位，使下一个制表符与下一个制表符对齐。制表位于块的起始内容边缘以块的字体呈现的空格宽度（U + 0020）的8倍的倍数处出现。
3. 如果一行末尾的空格（U + 0020）将“white-space”设置为“normal”，“nowrap”或“pre-line”，它也会被删除。
4. 如果行末尾的空格（U + 0020）或制表符（U + 0009）将“白色空间”设置为“预换行”，则UA可能会在视觉上将其折叠。

Answer 2

块级元素之间的任何空格都将被忽略，因此您可以以易于阅读的方式布置标记。如果不是这种情况，您的整个文档可能会有两三行。

您可以使用<br />标记添加换行符，或者添加带边距或填充的空格。请记住，HTML只是定义了文档的内容：它不关心它是如何呈现的。这就是CSS的用途。