3

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?

Community
  • 1
  • 1
Yarin
  • 173,523
  • 149
  • 402
  • 512

3 Answers3

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!

sdleihssirhc
  • 42,000
  • 6
  • 53
  • 67
  • 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? – Yarin Mar 04 '11 at 04:46
  • 3
    @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.) – sdleihssirhc Mar 09 '11 at 20:40
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.

scrappedcola
  • 10,423
  • 1
  • 32
  • 43
  • 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. – Brad Christie Mar 03 '11 at 18:23
  • IE7 does ok with it and FF is fine. I haven't tested in Chrome/Safari though (though my guess it will work). – scrappedcola Mar 03 '11 at 20:37
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.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • @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. – Yarin Mar 04 '11 at 04:42