为什么浏览器不会在<div>中呈现尾随？

Question

我有一个带动态内容的div，其中行由<br>元素分隔。问题是所有主要浏览器都忽略了最后一个<br>元素。

<div>
    long content ...
</div>
<div>
    long content ...
    <br>
</div>
<div>
    long content ...
    <br>
    <br>
</div>

见https://jsfiddle.net/4ppqb1ug/。示例有3个div。

• 首先没有<br>。
• 第二个结尾有1 <br>但是如果你在底部滚动div，则没有空白行结束。
• 第三个结尾有2 <br>，但只有一个被渲染。
• 演示中不存在的第四个有<br>，只有2个被渲染。
• 演示中不存在的第五个有4个<br>，只渲染了3个。

为什么浏览器会忽略最后一个？我可以阻止这个吗？是否有比上一次<br>重复更好的解决方案？

Answer 1

我从来没有使用过header('Content-Type: application/json'); echo json_encode($_POST); 。您可以使用p标签轻松管理它。还有文本格式化css规则，例如<br>，line-height，....您可以轻松使用这些并创建外观漂亮的文本。无论何时你需要为新段落断行，标准方法是使用另一个p标记，而不是font-size。

Answer 2

br标记仅使用换行符，不可能阻止，它可以解决您可以使用padding and margin最后一个div跨度和其他

Answer 3

这是因为<br>不会呈现任何空白。如果您想要一个空行，则需要有两个<br>标记

Answer 4

浏览器表现正常;你只是错误地认为br元素是间隔符。

如the HTML 5 specification所述，它们是换行符。这些元素中的每一个都将托架返回到下一行，但不会在该行上打印任何内容。只有在你添加第二行时才会显示第一行的空格。

您的第二个问题的答案是，是的，这个问题有一个更好的解决方案：使用CSS设置margin或padding个div元素。这使结构（HTML）与表示（CSS）分离。