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
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.
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.