Beware of "inline-block"

As a front-end web developer, knowing how to use inline-block is essential. Not just because it's an essential CSS property value, it's also one of those Swiss army knives that you can pull out of your magic little drawer. But the question is, do you know to avoid the traps of "inline-block"?

Cross Browser Support

Unfortunately, inline-block is NOT supported in IE7 and below, as well as FF 2 and below. The fix for both is rather simple.

For IE, just add

zoom: 1;
*display: inline;

What does this mean? display: inline tells IE to render the element as an inline element. But then you would ask, would it break the layout and the margin and all those properties related to block elements?

Let's take a look at zoom: 1. Early IE browsers had an interesting property called 'hasLayout'. Elements with this property switched on means that element itself would turn into a box and try to render itself. And hasLayout is not available as a property, but instead, zoom is. For more info, see http://haslayout.net/haslayout

The next line deals with getting IE to recognise the display property properly. Here I'm adding the * before the property to indicate it's a hack only for IE7 and below.

As for Firefox, simply adding

display: -moz-inline-stack;

would work. Inline stack was an experimental feature that was developed in Mozilla without officially added to Firefox. But all in all, it does the same thing as 'inline-block', just a dev version.

Divs of different height

'inline-block' follows the vertical-align property in setting it vertical distribution. You might've ran into this issue here

See JSBin example http://jsbin.com/wafub/2/edit

Where the blocks are aligned at the bottom. Or if the divs have content overflow, like so

See JSBin example http://jsbin.com/wafub/4/edit

By default, the inline-block divs are vertically aligned at the bottom if they do not overflow. and vertically aligned at the middle if they are. If you would like to have uniform alignment, you would need to have vertical-align property set to a uniform value for all the divs.

Empty horizontal space between divs

As you might have noticed in the previous example, there are some spacing between different div; even though I didn't add it. Take a look at this example http://jsbin.com/vatoh/2/edit

You will see that even with no margin and no padding on the inline-block divs, they still have a weird spacing between them. Here is why:

A line break is defined to be a carriage return (), a line feed ( ), or a carriage return/line feed pair. All line breaks constitute white space.

From http://www.w3.org/TR/html401/struct/text.html#line-breaks

In other words, when you have a whitespace between these elements, you will see a width of a single character.

So the easiest way to fix it is to put the divs on the same line. You can also use HTML comments between the div blocks to ignore the spacing. Many Android browsers have the issue where font-size of 0 do not render the element (thanks to comment from @stowball).

But what if you don't have control over the HTML, or that it bothers you having to go through all files just to make sure they are gone? (and make it incredibly hard for people to read your source code).

Here is a fix, by making the parent container having font-size: 0; and resetting the font-size in the element itself like so.

http://jsbin.com/vatoh/3/edit