Skip to content Skip to sidebar Skip to footer
Home / Css / Html

BR Tag Has No Effect When Parent Has Height

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

Solution 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.


Solution 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?


Solution 3:

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


Solution 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.


Solution 5:

Try this...

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

Post a Comment for "BR Tag Has No Effect When Parent Has Height"