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

Posted 2021-03-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML中的两个块元素之间是否会忽略空格或换行？相关的知识，希望对你有一定的参考价值。

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

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

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

答案

如果我们引用the specification：

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

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

我们来看这个例子：

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

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


some text


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

另一答案

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

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

以上是关于HTML中的两个块元素之间是否会忽略空格或换行？的主要内容，如果未能解决你的问题，请参考以下文章