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

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>最后，但只渲染了一个。
• 演示中不存在的第四个有 3 <br> ，只呈现 2 个。
• 演示中不存在的第五个有 4 <br> ，只渲染了 3 个。

为什么浏览器忽略最后一个？我能阻止这个吗？有没有比复制最后一个更好的解决方案 <br> ？

Answer 1

浏览器运行正常；您只是错误地将 br 元素视为间隔符。

如 the HTML 5 specification 中所述, 它们是换行符。这些元素中的每一个都会将回车返回到下一行，但不会在该行上打印任何内容。直到您添加第二个，第一行的空间才被表示。

你的第二个问题的答案是，是的，这个问题有更好的解决方案:使用CSS设置那些div的margin或padding 元素。这使结构 (HTML) 与表示 (CSS) 分离。