5m0srg
Last Updated: February 25, 2016
·
3.365K
· angelathewebdev

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

Picture
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

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

Picture

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

4 Responses
Add your response

13218

This is great if your project requires IE7 and FF2 support. In today's day we are seeing less and less support for these browsers with some of the major players dropping it. Here's to hoping we don't need to use this trick very often.

Great tip regarding the font-size reset on the parent div.

over 1 year ago ·
13282

@christophererk, unfortunately, that is not a luxury for developers here in China. We are still stuck with supporting IE6/7 as one third of our user still come from ancient browsers :(

over 1 year ago ·
19305

Be careful with font-size: 0 (especially for grids) because many Android browsers don't render the zero space: http://codepen.io/stowball/details/LsICH

Might also want to mention putting HTML comments between your inline-block elements to nullify the space.

over 1 year ago ·
19307

@stowball, thanks for commenting. I was wondering on such Android browsers, is there another way of avoiding the inline-block space other than putting comments manually between the elements? Perhaps something like setting the font-size to a very small number like (0.5px) so that the spacing is not really discernible.

over 1 year ago ·