If you’ve been developing with CSS for some time now, you’re certainly familiar with the inline-block value for the display property. The most common use for this property/value pair is when getting IE6’s margins to behave.
To briefly explain what I’m talking about, if you float an element in IE6 and give it a margin setting on the same side as the direction of the float, the margin will (strangely) be doubled. You could fix this with an IE6 hack with a margin setting that’s half the value of the original, or you could (in many cases) give the element’s display property a value of inline-block (again in an IE6-only hack or stylesheet). This will resolve the issue in most, if not all circumstances.
Although this IE6 workaround for floated elements has probably been the most useful way to implement the inline-block value, it could serve a much more legitimate purpose if the value itself is better understood.
How is it Defined?
Here are some definitions for the inline-block value, as taken from some noteworthy sites:
According to Sitepoint’s CSS Reference:
inline-block makes the element generate a block box that’s laid out as if it were an inline box.
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
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.
I think I like Nyman’s definition best, because it makes the value seem much more practical.
A Demonstration
Here is an image demonstrating inline-block, so you can see exactly how it would behave:
How Can it Be Used?
Here are some reasons you might want to use inline-block:
- To fix the IE6 double-margin bug on floated elements (as described above)
- To place multiple block-like elements on the same horizontal line without floating them
- To allow an inline element to have width and/or height while still remaining inline
- To allow an inline element to have padding or margins
Some Things to Note
<
p>If you use inline-block there are some important factors and drawbacks to keep in mind. An inline-block element is white-space dependent, so if you display list items using inline-block (in a navigation bar, for example), the list items will have unwanted space next to each other. To remove the space, you’ll have to remove from your HTML code any whitespace that occurs in between the list items. So your list item code would look like this:
<ul> <li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li> </ul>
Or even worse:
<ul> <li>Item One</li ><li>Item Two</li ><li>Item Three</li ><li>Item Four</li ><li>Item Five</li> </ul>
That issue could evidently be resolved by adding font-size: 0 to the <ul> element, or something similar, then increasing the font size for the list items. But those solutions are messy, so I would recommend instead trying a solution that doesn’t use inline-block.
Also, if you declare a number of elements using inline-block and the elements have varying heights, you will probably have to add something like vertical-align: top to ensure their alignments are not staggered. Here is an interesting page that displays some of these and other quirks that occur with inline-block in different circumstances.
Finally, I found in my experiments that inline-block didn’t work exactly the same when the inline-block element occurred inside of text that was inside of a paragraph element.
Is it Cross-Browser?
It shouldn’t surprise you to learn that inline-block works the same in all browsers except IE6 and IE7. But it’s not too difficult an issue to deal with in those versions. To get an element to accept the value inline-block for IE6 and IE7 you just need to reset the display property to inline then give the element layout. Just make sure that the inline value appears after inline-block in your CSS, and hide the inline value from other browsers. You may also have to fix the vertical alignment for IE6 and IE7.
I find it so hard to keep calm when talking about IE6. I feel like MS slap me in the face every time we build a site. Nice post. Short & sweet.
Either that or you could just read the CSS2.1 specification on w3 web site and realize that the container of your floating elements has to has overflow:hidden; so it clear itself, and guess what – margins stay the same :)
Maybe it is hard for some people to just read specs….
Here, to prove I am not heartless …
http://www.w3.org/TR/CSS21/visuren.html
Hey Martin,
It seems that your referring to the float/margin bug that happens in IE6. Here is a demo page that demonstrates what happens:
http://www.impressivewebs.com/demo-files/inline-block/
You’ll notice when you view the page in IE6, the left margin of the first floated box is doubled. This only happens in IE6, and it happens even with overflow set to “hidden” on the container, as is the case in the example.
If you were referring to something else, then you’ll have to provide further explanation, or else set up a demo page of your own. Thanks.
Hi Louis,
Yes you are right, I have throughly tested it, and re-read your article. As you know i mention in the brief –
“To briefly explain what I’m talking about, if you float an element in IE6 and give it a margin setting on the same side as the direction of the float, the margin will (strangely) be doubled.”
As I skip briefs and almost every time read the articles fast (until find something new for me) I failed to notice that.
Here is my example:
http://79.134.166.219/ieMarginBug/
While testing thou I found something that I haven’t anticipated. I guess it is supposed elements to have both left and right margin, and then the miracle happens.
The thing is that IE doubles the margin on purpose I guess – as you can see in the example, setting elements with both left and right margin will make you use padding on the container to make the first element has the same margin as between elements (in other browsers).
Okay, thanks for the reply Louis. Today I’ve learned something new.
Regarding inline-block :) I like it too :)
Actually inline-block pretty much behaves like an image you insert into some text. And yes it is pretty useful. Good article, the more is written about it, the better, people should know about this. :)
One of the most common situations I use inline-block for is to align elements adjacent to a heading.
Pretty useful the inline-block.
well written article….
great article
Thanks for good explanation.
Pretty cool, I can think of a few uses for inline block in my web design. Never heard of it before but great explanation of how to use it and when. Much appreciated.
Very nice discussion about inline block….
Was able to create a workaround to this whitespace issue that appears to work cross-browser. I’ve created a blog post detailing it here:
http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/
Firefox 2 have probleme deal with inline-block. You can find a demonstration here :
http://cahnory.fr/css/inline-block.html
FF2 needs special -moz-inline-stack and, in some cases, the inline-block needs an element displayed in “block” in it. (sorry for my english, demonstration talk easier)
Nice article. A good explanation.
However inline-block doesn’t work in Firefox 2. You may think it’s irrelevant as FF2 is not used much anymore but I just thought I would even out the IE bashing. =P
Here’s a good link.
http://www.quirksmode.org/css/display.html
Yep, I actually linked to that article (see the quote near the top from QuirksMode). And I did see that problem with FF2 (as another commenter mentioned), but I didn’t include it because FF2 is pretty much dead at this point.
What I’m missing in this article is horizontal alignment of non-specified width “block” elements.
An example might clear things up a little: Image paging, where all the pages are displayed as cubes (border, possible gradient). You won’t know how many pages there will be, but the design wants you to center the paging.
Inline-block is pretty much the only way to do this. margin:auto; requires a width, inline elements can’t do top/bottom paddings.
So pretty much, it behaves like img and input tags.
Wow, another thing I didn’t know. I really need to read through the CSS specifications again to plug more of these knowledge holes…like friggin transparent borders so obvious yet didn’t learn about it till a few weeks ago.
Thanks for teaching me something new Louis. I always feel the day was worthwhile when I learn something new and useful.
Pretty cool, I can think of a few uses for inline block in my web design. Never heard of it before but great explanation of how to use it and when. Much appreciated.
PINTU
Inline-block is the most genius css property ever, and ofcourse its cross browser, it can fix alot of ie6/ie7 bugs aswell.
I have found this article to be very helpful. Thanks for sharing.
In http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html it’s mentioned that to get display:inline-block work properly in IE6 we need to mention height.
“IE6 requires a height be set to the element and that’s added by “_height: 30px;”
What’s your take on this?
Thank you for this article.. I was facing trouble with desplaying the 3 image buttons using img {display: inline-block;}, black space was coming between two buttons.
When i used your tip to remove spaces between two list items.. which were buttons in my case…
It really worked :)
THANX AGAIN
very fine and nice discussion this topic….
I know this is an old article, but still very helpful. Thanks a lot, I have always had issues with displays and this certainly helped me understand inline-block better.
Thank you for this article.. I was facing trouble with desplaying the 3 image buttons using img {display: inline-block;}, black space was coming between two buttons
thank to all of you for this article