why do modern browsers still put spaces between inline block if there is whitespace

Question

If you have markup like this:

<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>

and css like this: .inlineblock{ display: inline-block; }

You will get spaces between the elements. about 4px of space. unless your markup looks like this:

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

Now, what i would like to know is WHY?

What is the technical reason that "good" browsers still do this, even the latest Firefox, Chrome, and Opera at the time of this posting still do this. I assume there is a technical reason behind it, otherwise it would have been fixed by now?

Thanks!

Answer 1

This is exactly what they should do.

Spaces between inline elements are no different from spaces between words.

If you don't want that, use block elements, or set the font size to zero.

Answer 2

Well, there are spaces between them!

For a fix, try using font-size: 0 in the parent element.