当父母有身高时 BR 标签无效 [英] BR tag has no effect when parent has height

问题描述

问这个问题是出于好奇.我刚刚注意到当我有这样的标记时:

测试<br/><br/><br/>

br 标签无效.但是，如果父级没有高度，即 height: auto - br 标签变得有效 - 为什么会这样?

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

解决方案

我认为
标签 do 有效果.如果我按如下方式更改您的标记:

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

然后我可以看到效果——).

因此，
确实有所作为，但是在

上设置高度后，您实际上看不到如果只有
，它们的区别在于，根据定义，它们只是换行符，而不是直接可见的.

This question is being asked out of cursosity. I've just noticed when I have this bit of markup:

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

The br tags have no effect. However, if the parent has no height i.e. height: auto - the br tags become effective - why is this the case?

Is this the same in all cases i.e. across different doc types and browsers?

解决方案

I think the <br> tags do have an effect. If I change your markup as follows:

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

Then I can see the effect -- jsFiddle here.

The default overflow is visible (in my browser, anyway), so the text visibly overflows the <div>. In the case of <br>, you're just getting empty lines extending below the <div>, which are invisible, but present.

If you add overflow: scroll to the <div>, you can also see the effect -- there are clearly blank lines at the end of your text, that you can scroll through. Markup:

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

(jsFiddle here).

So, the <br>s do make a difference, but with the height set on the <div> you don't actually get to see the difference if there are only <br>s, as they are, by definition, just line breaks, and not directly visible.

这篇关于当父母有身高时 BR 标签无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！