Question

我写了一首诗，然后我用HTML重写了这首诗，所以我可以把它放在我的博客上。但是，即使我将每个节包装在<div>个标签中，它们之间也没有像应该存在的那样断行。

根据w3schools.com，“默认情况下，浏览器始终在<div>元素之前和之后放置换行符。但是，这可以使用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 标签的原因，它们是行 br eak 标签。

如果没有换行，这条线就会像这样继续：

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

我认为您正在寻找您的节之间的垂直保证金。如果您不想使用CSS，P标签默认具有垂直边距，这近似于诗歌节之间的间距。

请参阅this question（但忽略了首先被接受的答案）。

Answer 3

我想你想要用空格分隔节，这与换行符不同。

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

这是有效的，因为默认情况下浏览器会给<p>一个垂直边距。你可以使用<div>以相同的方式使用CSS。

<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>标签没有给出换行符？

3 个答案: