CODEWITHSUNDEEP
htmlcss
Yarin
Yarin

Reputation: 183499

Why use display:inline-block?

The new display:inline-block attribute seemed like a useful alternative to doing display:block + float:left/right, but 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?

Upvotes: 3

Views: 2196

Answers (3)

sdleihssirhc
sdleihssirhc

Reputation: 42496

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!

Upvotes: 6

meder omuraliev
meder omuraliev

Reputation: 186552

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.

Upvotes: 3

scrappedcola
scrappedcola

Reputation: 10572

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.

Upvotes: 4

Related Questions