Question

inline-blocks are just so nice to use. Imagine this, I want to centre a couple of divs, instead of fiddling around with some margin-auto (which end up actually not working when we want to centre multiple divs), all I have to do give all those divs inline-block and put them in a container div with text-align:center

I mean I’m just giving one example (which I’d just came across) on why inline-blocks just pwn. So inline-block allows us to give paddings and margins to inline elements, and at the same time we do not have to declare an explicit width for those elements. Exactly what is the catch here? I simply can’t believe this is without its cost.

Answer 1

The catch is IE6/7 support on naturally block level elements. it only gets it right first time if inline-block is used on an inline element like a or span BUT..

This can be worked around luckily (inline-blocks are cool!) by using hasLayout – in short redeclaring the blocks display to be inline once they have had hasLayout triggered on them (which the original inline-block rule does)

The other catch is that inline-blocks naturally should have whitespace between them like words in a sentence, indeed they do in most browsers but you’ve guessed it not in IE. So when you’re trying to align boxes perfectly side-by-side, as if they were floated you have to allow for this space, but not in IE.

There are a few ways to control this gap, with word-spacing being arguably the most logical one, but not all browsers agree on this, so the most stable cross-browser way I’ve found is to use margin-right: -4px; this means you can use a second workaround for IE6/7 (as it doesn’t have these gaps) to reset it’s right margin to 0 – oh and whitespace in the HTML can sometimes throw a curveball too.

Here’s a snippet I tried testing to incorporate the IE fixes with which seems to work well across browser, it also tests for the whitespace in HTML problem (which I can’t reconstruct anyhow.. but was there when I originally tested this code a few weeks ago)

CSS:

#wrapper {
   background: #eee;
   width: 200px;
   padding: 1px 0;
}

.foo, .bar {
   display:inline-block;
   width:98px;
   background: #eee;
   color:white;
   text-align:center;
   font-size: 30px;
   font-family: "trebuchet ms", georgia;
   margin-right: -4px; /* this is the easiest cross-browser fix to zero the whitespace between blocks */
}

.foo, .bar {
/* THE IE workarounds, must come after the above rule */
/* note this is a hack.. the !ie7 part.. 
   you could put this rule set in a conditional 
   or use your favourite method  to feed to LTE IE 7 */

   display: inline !ie7;
   margin-right: 0 !ie7;
}

.foo {border: 1px solid #000;}
.bar {border: 1px solid #f00;}

p {margin: 0;}
.wrap {margin: 20px 0;}

HTML

<div id="wrapper">
<div class="wrap">
    <p class="foo"> Foo </p>


    <p class="bar"> Bar </p>
</div>
</div>