Why use display:inline-block?

Question

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?

@BoltClock- oh- assumed it was because of the spotty browser support... — Yarin
– Yarin, Commented Mar 4, 2011 at 4:38

sdleihssirhc · Accepted Answer · 2011-03-03 18:22:35Z

6

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!

answered Mar 3, 2011 at 18:22

sdleihssirhc

42.6k6 gold badges56 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yarin Over a year ago

Thanks for illustrating something you can't do with floats- this makes the most sense. But can you explain what the "two additional CSS rules" are all about?

sdleihssirhc Over a year ago

@Yarin IE6/7 don't recognize display:inline-block explicitly, but you get about the same behavior from them by also including *display:inline; zoom:1. The first rule is a hack, the second triggers hasLayout. (Sorry it took so long to get back to you.)

scrappedcola · Accepted Answer · 2011-03-03 18:20:27Z

4

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.

answered Mar 3, 2011 at 18:20

scrappedcola

10.6k1 gold badge36 silver badges48 bronze badges

2 Comments

Brad Christie Over a year ago

And to my recollection inline-block isn't a "standard" implementation. i.e. some browsers can handle it, some can't. At least at my last attempt.

scrappedcola Over a year ago

IE7 does ok with it and FF is fine. I haven't tested in Chrome/Safari though (though my guess it will work).

meder omuraliev · Accepted Answer · 2011-03-03 18:21:04Z

3

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.

answered Mar 3, 2011 at 18:21

meder omuraliev

187k76 gold badges402 silver badges443 bronze badges

1 Comment

Yarin Over a year ago

@meder- you always give me something to think about, but this attribute can't only be useful for compensating for an IE float quirk? Love your site btw.

Collectives™ on Stack Overflow

Why use display:inline-block?

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related