问题

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?

回答1:

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.

Lines of text overflowing a div

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.

回答2:

Well if you think about it then this should be the case on all elements/text in that div... When content is to big then you will get a scroll if you add "overflow:hidden;"

But why would you set a height on an element that might need to grow taller?

回答3:

If you provide an overflow: auto to your div, you'll be able to see that the <BR>s are indeed there.

回答4:

Yes, it is the same across all browsers.

overflow and auto

Your text is too high for the content box. So if overflows.
As you haven't set an overflow style, it gets the default which is visible, according to the spec.

See an explanatory example: http://jsfiddle.net/bsZG7/
(The second div has padding-left for the convenience of understanding what is going on.)

Because the content that spills is not visible, you do not notice it.

misusing `br`

The br element represents a line break.
And, quoting http://developers.whatwg.org/text-level-semantics.html#the-br-element :

While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or user agent would be equally justified in causing line breaks to be rendered in a different manner, for instance as green dots, or as extra spacing.

You should not be using it to style, as you seem to be.
If you want a margin on the bottom of some box, give it a class or id and put in your css file margin-bottom: 30px;.

inline styles

You should avoid inline styles as much as possible, instead placing all styles inside a css file. You might just be doing it for the sake of testing, but I will leave the suggestion anyway.

There are many justifications for this, including that the css file can be cached, that you centralize styles in a styles file, that you avoid repetition, that you simplify changes... the list goes on and on.

回答5:

Try this...

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

来源：https://stackoverflow.com/questions/8969955/br-tag-has-no-effect-when-parent-has-height

标签

html

css

BR tag has no effect when parent has height

问题