html - 当 parent 有高度时，BR 标签无效

Question

这个问题是出于粗鲁而被问到的。当我有这个标记时，我才注意到:

<div style="height: 20px; background-color: yellow;">
    Test
    <br />
    <br />
    <br />
</div>

br 标签无效。但是，如果父级没有高度，即 height: auto - br 标签生效 - 为什么会这样？

这是否在所有情况下都相同，即跨不同的文档类型和浏览器？

Answer 1

我认为 <br>标签确实有影响。如果我按如下方式更改您的标记:

<div style="overflow: visible; height: 20px; background-color: yellow;">
    Test
    <br />
    Test 2
    <br />
    Test 3
    <br />
    Test 4
</div>

然后就可以看到效果了 -- jsFiddle here .

默认溢出是visible (无论如何，在我的浏览器中)，所以文本明显溢出了 <div> .在<br>的情况下，您只是在 <div> 下方延伸空行，它们是不可见的，但存在。

如果添加 overflow: scroll到 <div> ，您还可以看到效果——文本末尾有明显的空白行，您可以滚动浏览。标记:

<div style="overflow: scroll; height: 20px; background-color: yellow;">
    Test
    <br />
    <br />
    <br />
</div>

(jsFiddle here)。

因此，<br>这确实有所作为，但在 <div> 上设置了高度如果只有 <br>，您实际上看不出区别s，根据定义，它们只是换行符，并不直接可见。