Question

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?

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

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.