使用 br 或 div 进行分节符答案

【问题标题】：Using br or div for section break使用 br 或 div 进行分节符
【发布时间】：2020-01-14 22:32:34
【问题描述】：

我曾在几个地方工作过，并且看到了两种在 HTML 中进行分节或换行的不同方法。

我见过的一种方法是这样的：

<div class="placeholder-100pct">&nbsp;</div>

另一个只是使用普通的旧 。

一个人比另一个人有什么好处，还是只是风格问题？

【问题讨论】：

你能通过代码示例提供一些上下文吗？段落内的换行符将（语义上）使用 BR 标签处理。但如果这是出于布局目的，您可以考虑在容器 DIV 上使用 clearfix 类。

【解决方案1】：

当您想在段落中换行时使用 ，如下所示：

<p>Hi Josh, <br/> How are you?</p>

这在写地址时可能很有用：

<p>John Dough<br/>
1155 Saint. St. #33<br/>
Orlando, FL 32765
</p>

使用 div 会自动给你一个新行，但如果你想要两个元素之间的空间，你可以在 div 上使用一个边距。

不要使用 在两个div之间获得一些空间：

<!-- This is not preferred -->
<div>Hello</div>
<br/>
<div>Something else here</div>

希望对你有帮助

【讨论】：

谢谢。我很清楚
是用于内容和 div 以及 CSS 样式，用于部分的布局。猜猜这是我问自己的一个基本问题，但这是我想知道的那些时刻之一，“我为什么要这样做，其他人是怎么做的？”再次感谢！
两个元素之间的间距将由父容器的行高决定，这不一定是您想要的。它从来没有打算用作分隔符，而是用作换行符。

【解决方案2】：

div 是一个通用容器。 br 是一个 line 分隔符。两者都不是特别适合表达分节符。

HTML 5 引入了sections。您标记每个部分，而不是它们之间的中断。

<section>
  <!-- This is a section -->
</section>
<section>
  <!-- This is another section -->
</section>

【讨论】：

【解决方案3】：

在语义上有意义时使用
。如果您只需要换行符，那就是它的用途。如果您尝试拆分不同类型内容的部分，则每个部分都应该在自己的容器中。例如，如果您有一个地址，地址的每一行都将显示在单独的行上，那么这样做是有意义的：

<address>
123 Main Street<br />
Anywhere, USA 12345
</address>

【讨论】：

【解决方案4】：

一个明显的区别是  是内联元素，而<div> 不是。

所以这个：

<span>Some text broken into <br /> lines</span>

... 是有效的 HTML 代码，而这个：

<span>Some text broken into <div>&nbsp;</div> lines</span>

... 不是，因为您不能将块元素放在内联元素中。

【讨论】：

【解决方案5】：

  的缺点是将部分之间的间隙大小限制为它所在的  应用或继承的行高。

换句话说，使用 ，中断的大小只能正好是一行文本的高度。

如果您想保留对间距的任何控制，请务必将每个您的“部分”包装在它们自己的标签中，并使用边距来控制间距。区别不仅仅在于标记的语义。

【讨论】：

【解决方案6】：

如果您希望在主题休息的意义上在两个内容部分之间提供休息，那么<hr> 是您应该使用的元素。

hr 元素表示段落级别的主题中断，例如，故事中的场景变化，或参考书部分中到另一个主题的过渡。

根据需要设置它们的样式也相对简单，因为它们可以采用您需要的任何尺寸。但请注意，它是一个 void 元素，不能包含内容（尽管您当然可以根据需要为其添加背景图像）。

【讨论】：