Question

As illustrated in this jsfiddle: http://jsfiddle.net/qrbhb/

If you take this markup:

<div>There should be no gap between us</div>
<br />
<div>There should be no gap between us</div>

and this css:

div {
    background: #999;
}

br {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

All webkit based browsers will display a gap equal to the line height of the parent element, while firefox and IEs will not display a gap. I don’t know who is following the spec here, but I can’t for the life of me get this to display the same in all browsers and it’s driving me crazy. Any ideas?

EDIT: Sorry folks, I was looking at a rather complicated layout and mistakenly thought some elements were floating that weren’t. Floated elements behave as expected.

Answer 1

Odd. I can see some logic to what’s going on. It seems to be using the line-height from the preceding element as the height. If you add this, for example, just before the <br /> as shown:

<div class="weird" /><br />

…and then set its line-height:

div.weird {
    line-height: 0;
}

(jsFiddle here)

…then the <br /> loses its height.

So, I’d guess that the line-break “inherits” — although that’s rather the wrong word — the height of the preceding bit of text. I’m not certain that’s really what’s going on, but it makes the most sense of the explanations I can think of.

Really, though, I’m with everyone else — if you don’t want a break between lines, don’t use a line-break. If you’re going to go a bit non-semantic for clearing stuff anyway, I’d just live with it and use a <div>; the practical elements of the web community will understand and forgive you 🙂