Why use display:inline-block?

The new display:inline-block attribute seemed like a useful alternative to doing display:block + float:left/right, but开发者_Go百科 the strange spacing/white-space behavior it introduces seems to negate that convenience.(See here and here) On top of that, browser support is spotty and needs fixes, though that will obviously change.

According to this Yahoo UI uses it heavily, but why? Is there a compelling case for using inline-block?

One useful situation is when you want to have rows of items with variable height. If you were to use floats, then you'd also have to come up with some way to clear all of the second row from the first. Here's an example of that ugly behavior.

But, using the magic of inline-block, here's a version that works. With only two additional CSS rules, it even works in IE6 and 7!

I usually use inline-block for inline elements that I want to be able to give height and width to. This is helpful when using sprites (especially for rounded corner buttons using the sliding door method). I don't use it for everything though and I'm more likely to actually use a float when needed than to break a block level element to using inline-block.

Because floats introduce issues in IE in terms of horizontal floats need an explicit width assigned in order to stay on the same horizontal level. With inline-block ( with fixes ) you can avoid assigning explicit widths to the floated items but maintain the blocky inline behaviour that you desire.

You also don't have to clear the items afterwards but I guess that compensates for the inline-block fixes you need to do.