how to stop inline-block whitespace being rendered in the browser

Question

Roughly speaking, attempting to build a four-column layout, I've got this HTML:

<div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
</div>

And I've got this CSS:

div {
    background: #ccc;
}

div div {
    background: #eee;
    display: inline-block;
    width: 25%;
}

-> Fiddle me this <-

When rendered in the browser (Currently, I have been testing with Chrome only) the whitespace between the nested div elements (in this example the whitespace is caused by line breaks) is rendered, thus throwing my layout out.

Clearly, I can float my nested divs...

div {
    background: #ccc;
}

div div {
    background: #eee;
    width: 25%;
    float: left;
}

-> Fiddle me that <-

But then my container div collapses and I don't want to have to have to use CSS clearfix hacks or extra HTML to open it back up.

Alternatively I can modify my HTML such that the whitespace is removed...

<div><div>A column</div><div>A column</div><div>A column</div><div>A column</div></div>

but that makes it hard to work with. The alternative of breaking the tags so that it becomes more readable somehow leaves me feeling dirty...

<div>
    <div>A column</
    div><div>A column</
    div><div>A column</
    div><div>A column</div>
</div>

I've found a resource or two (I failed to find anything on SO) but I don't really like any of the solutions - they are all workarounds, which I will entertain if I must but surely there's an alternative?

So my question(s)... is there a cross-browser, w3c-compliant, non-javascript, hack-free, tidy HTML, bombproof way of preventing HTML whitespace from being rendered in the browser whilst using display:inline-block? Or is there an alternative to inline-block that can be used that has no unpleasant side effects?

EDIT

Assuming that this is genuinely impossible, the best solution would be something that required no addition HTML markup and 'flexible' CSS. In other words, a webmaster could edit the HTML as normal without consideration of breaking the layout, and the CSS (hacked or otherwise) will accommodate the webmaster's amends without having to be amended itself.

MY "WORKAROUND"

Well, it looks like something's got to give. In my situation it is more important to have HTML that doesn't require extra markup so the best solution is to work in a CSS hack that "just works" invisibly. The solution is to float the nested divs and add a hack...

div div {
    float: left;
}

div::before,
div::after {
    content: "";
    display: table;
}

div::after {
    clear: both;
}

div {
    *zoom: 1;
}

...which is a derivation of a fix I've been using for some time and was hoping to avoid. This succint version of the fix was found on this site.

So now every single div in the markup has got the clearfix hack applied to it whether it needs it or not. I'm yet to learn if this has any bad side-effects by being applied to all divs - I look forward to debugging and fixing when any problems surface ;-)

Answer 1

You provided nearly all possible solutions to this big layout question. I just want to point out my preferred solution.

Set font-size to the parent to 0 and resetting it again with REM's.

You'll have no trouble with your code and layout if there is no additional text inside the parent div (not the child divs).

REM's (Relative EM's) are not relative to the font-size of the parent elements (like normal EM's are), but relative to the root element of your document – the html element.

HTML:

<div class="parent">
    <div class="child">column 1</div>
    <div class="child">column 2</div>
    <div class="child">column 3</div>
    <div class="child">column 4</div>
</div>

CSS:

html {
    font-size: 1em;
}

.parent {
    font-size: 0;
}

.child {
    display: inline-block;
    font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
    font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
    width: 25%;
}

No Browser support:

• IE8 and below: Add pixel-based font-size to make it work.
• IE9/10: not working with font-shorthand; use font-size instead!
• (Opera Mini & iOS 3.2)