CSS Layout

inline-block

Full support for inline-block came in with Firefox version 3 in 2008 and Internet explorer version 8 in 2009. inline-block was not intended page layout but can be used with some workarounds.

Pros

A big advantage inline-block has over float based layouts is not having to clear floats. This makes it much easier to work with on responsive layouts.

Cons

The big drawback is whitespace matters and has to be collapsed. This article explains the many ways web developers have been fighting this whitespace.

The way I highly recommend is using HTML comments.

<ul>
    <li>one</li><!--
    --><li>two</li><!--
    --><li>three</li>
</ul>
                

It looks a little strange at first but it's a bullet proof way to remove the whitespace and still preserve code indentation. Other methods listed in the article that use negative margins or setting the font-space to 0 have edge case issues.

I actually prefer to deal with the whitespace issue over having to deal with clearing floats when using a float based layout.