css - 使用 br 或 div 进行分节符

Question

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

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

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

而另一个只是使用普通的 old <br />。

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

Answer 1

<br/>当您想要在段落中换行时使用，如下所示：

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

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

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

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

不要用于<br/>在两个 div 之间获得一些空间：

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

希望这可以帮助

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

所以这：

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

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

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

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

Answer 5

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

换句话说，使用 时<br>，中断的大小只能是一行文本的高度。

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

Answer 6

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

W3C 规范

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

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