Comments on: CSS display: inline-block: why it rocks, and why it sucks

By: mehrere Block-Elemente zentriert darstellen - Flashforum

mehrere Block-Elemente zentriert darstellen - Flashforum — Wed, 01 Sep 2010 20:18:21 +0000

[...] [...]

By: My bookmarks for 07/25/2010 | SiliconChaos

My bookmarks for 07/25/2010 | SiliconChaos — Sun, 25 Jul 2010 11:33:14 +0000

[...] » CSS display: inline-block: why it rocks, and why it sucksRobert’s talk – Web developm… [...]

By: Matbaa

Matbaa — Fri, 09 Jul 2010 13:23:02 +0000

Thank you.

/* For IE 7 */
zoom: 1;
*display: inline; was important for me.

By: Robert Nyman

Robert Nyman — Tue, 01 Jun 2010 22:08:08 +0000

Roger,

Glad you liked it!

By: Ningbo Hotels

Ningbo Hotels — Tue, 01 Jun 2010 15:59:10 +0000

Hi Robert!

Thank you for this interesting article!
For my personal usage, “display: inline” rocks

I use it to get perfect images gallery and I align for example 3 thumbnails horizontally on a line with equal space on the left and right of my pics.

My CSS code is very simple as I use a “float:left;” with “width:33%;” and an img class including “display: inline”.
I used to have display:block and my thumbnails were not perfectly centered. When I switched to inline, they just moved to a perfect equally aligned position.

So for me, yes this is a magic value

Cheers!
Roger

By: What is Inline-Block? | Impressive Webs Toronto

What is Inline-Block? | Impressive Webs Toronto — Mon, 26 Apr 2010 20:03:35 +0000

[...] According to Robert Nyman: Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc. [...]

By: display:inline-block; ??? | css | understandard.net

display:inline-block; ??? | css | understandard.net — Tue, 23 Mar 2010 08:21:39 +0000

[...] ???????float:left; ????display:inline-block; ????????? ?????CSS display: inline-block: why it rocks, and why it sucks [...]

By: Robert Nyman

Robert Nyman — Mon, 08 Mar 2010 09:01:57 +0000

tOM,

Well, there are a number of downsides to that to, in terms of semantic value and representation, certain lack of width control etc.

By: tOM Trottier

tOM Trottier — Sun, 07 Mar 2010 02:44:13 +0000

(actually meant )

By: tOM Trottier

tOM Trottier — Sun, 07 Mar 2010 02:42:31 +0000

Tables! Let do all the work!

tOM

By: Robert Nyman

Robert Nyman — Fri, 05 Mar 2010 08:32:32 +0000

Christophe,

Using overflow: hidden to make a parent element contain all its floated children elements is a great approach, but it won’t be sufficient when the floated children span across multiple rows and and when the items aren’t of equal height.

By: Christophe

Christophe — Thu, 04 Mar 2010 18:25:42 +0000

Hi there,
i’m not exactly sure (I’m french) to understand, but problems I often encountered with float, came from “clear” property from the parent element.
To solve it, I use “overflow:hidden” property on parent element, for exemple :
ul#display-inline-block-example, ul#display-inline-block-example li { /* Setting a common base */ margin: 0; padding: 0; }


	ul#display-inline-block-example {

		display: block;

                position:relative;

                overflow:hidden;

               width:100%;/*for exemple*/

	}

ul#display-inline-block-example li { float:left; width: 100px; min-height: 100px; background: #ccc; }
What do you think about this tip ?

By: Robert Nyman

Robert Nyman — Wed, 03 Mar 2010 08:44:13 +0000

Anders,

Yep, the gap is the only actual issue with it. I believe it comes from a long, troublesome heritage of respecting white-space between inline elements, which is, if you ask me, a terrible thing.

By: Anders

Anders — Tue, 02 Mar 2010 20:34:42 +0000

inline-block is the shizzle! In my opinion floats were never meant to be used as a complex layout mechanism, but rather for having text wrap around images and stuff like that.

One huge advantage is that it removes all the hassle of clearing. On the downside though is the gap issue that you mentioned. Is there any logical reason as to why it should behave that way?

By: CSS Brigit | CSS display: inline-block: why it rocks, and why it sucks

CSS Brigit | CSS display: inline-block: why it rocks, and why it sucks — Tue, 02 Mar 2010 13:31:02 +0000

CSS display: inline-block: why it rocks, and why it sucks…

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block….

By: Robert Nyman

Robert Nyman — Mon, 01 Mar 2010 16:18:13 +0000

dougwig,

Absolutely, good point!

By: dougwig

dougwig — Mon, 01 Mar 2010 16:15:24 +0000

Display:inline-block is also handy when you want to align traditionally block-level content ( say a list or a small form ) within a line-box ( The block level parent ). Remember vertical-align:middle or text-align:center ? This all works with elements that are display:inline-block. Rarely needed, but nice to have when you need it.

By: Robert Nyman

Robert Nyman — Mon, 01 Mar 2010 14:47:28 +0000

Jordan,

Thank you!

By: Jordan Walker

Jordan Walker — Mon, 01 Mar 2010 14:44:13 +0000

This is a great article about css inlin display, very helpful and informative.

By: Robert Nyman

Robert Nyman — Mon, 01 Mar 2010 10:35:06 +0000

Jan,

It’s an interesting thought, but apparently it can’t be used to remove white-sapce.

Jon_E,

Yes, since this is a private web site, there’s no time or need, from my point of view, to adapt a design to a web browser used by less than 0.01% of my visitors.

Sarven,

It’s interesting, but only in web browsers that support the :before pseudo protocol.

Mathias,

Interesting! Seems a bit tricky, but might be a viable option. Thanks!