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)

Answer 2

is there a ... way of preventing HTML whitespace from being rendered in the browser whilst using display:inline-block?

Yes, there are several ways. None of them really meet your criteria of 'hack-free' and 'tidy', but they do work.

• Reformat ('minify') your code so that it doesn't have any white space between the elements.
  This is probably the most hack-free and cross-browser solution. It isn't necessarily tidy though, and it means you're fixing your layout by adjusting the HTML rather than the CSS, which isn't ideal. But it does work well. If you want to keep your code readable, you could use HTML comments so you can keep the gaps but without them being in the DOM:

     <div>block 1</div><!--
  --><div>block 2</div><!--
  --><div>block 3</div>
  

  Still not ideal, but more readable than a massive single line of code.

• Set the font-size to zero for the container, and back to full size again for the blocks.
  This works really well. It's a pure CSS solution and easy to do. The down side is that it can be difficult to work with if you've got relative font sizes (ie setting back to 14px is fine, but setting to 1em won't work because 1em of the previous font size of zero is still zero).

• Set a 1em negative margin to close the gap.
  This also works pretty well, but can be imprecise.

Or is there an alternative to inline-block that can be used that has no unpleasant side effects?

• There's always float:left. But that's got a whole range of different issues of its own. If you're using inline-block, the odds are good it's because you don't want to use floats.

• Use position:absolute and do the layout manually.

Answer 3

You can use the float method you described in your question, but you didn't clear your floats, which is why the container collapses.

A good method is to use an ::after pseudo element attache to the container element to "auto-clear" itself:

 div:after {
    content: "";
    display: table;
    clear: both;
}

http://jsfiddle.net/s2rJW/3/

Answer 4

When i saw your "workaround" i was thinking: Why don't you use a <table>?

And then i figured this out:

div {
  background: #ccc;
  display: table;
  width: 100%;
}
div div {
  background: #eee;
  display: table-cell;
  width: 25%
}

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