为什么我的 <div> 标签没有换行符？

Question

我写了一首诗，我在 HTML 中重写了这首诗，所以我可以将它包含在我的博客中。然而，即使我将每个节都包裹在 <div> 标签中，它们之间也没有像应该的那样换行。

根据w3schools.com，"By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS."

但是你会注意到我的代码中没有 CSS，所以我不知道为什么它没有换行符。

JSFiddle：https://jsfiddle.net/43dn9tr9/2/

Answer 1

顺便说一句，w3schools 是个臭名昭著的烂摊子。您可能想尝试一些更有信誉的东西。

您的 HTML 的输出完全正确 - div 换行。 w3schools 给你的解释并不是非常具有描述性，因为它暗示了实际上并不存在的换行符。事实上，最好不要根据换行符来考虑布局，因为那根本不是模型的工作方式。

最好说 div 是相对于彼此垂直排列的块（当然忽略 CSS）。在您的输出中，三个 div 是垂直排列的。一个很好的例子是用将每一行放在它自己的 div 中来替换你的 br 标签，这会获得相同的结果。 https://jsfiddle.net/43dn9tr9/3/

Answer 2

您的 div 标签确实有换行符。换行符与使用 br 标签时得到的一样。这就是为什么 br 标签被称为 line break 标签。

如果没有换行符，该行将像这样继续：

This is Stanza 1, Line 4. This is Stanza 2, Line 1,

我认为您正在寻找节之间的垂直边距。如果你不想使用CSS，P标签默认有垂直边距，近似一首诗的节间距。

参见 this question（但先忽略被否决的已接受答案）。

Answer 3

我猜你想用白色分隔节 space，这与换行符不同。

您可以使用 <p> 而不是 <div> 来实现此目的。参见 https://jsfiddle.net/43dn9tr9/6/

这是可行的，因为浏览器默认给 <p> 一个垂直边距。您可以使用 CSS.

使 <div> 以相同的方式运行

<style>
    div.stanza {
        margin: 20px 0;
    }
</style>

<div class="stanza">
    This is Stanza 1, Line 1,<br>
    This is Stanza 1, Line 2,<br>
    This is Stanza 1, Line 3.<br>
    This is Stanza 1, Line 4.
</div>

[...]

为什么我的 <div> 标签没有换行符？

Why Aren't My <div> Tags Given Line Breaks?

html

markup