Inline-Block whitespace workaround

by Mike Badgley on April 28, 2010

In response to an article written yesterday (April 26th, 2010) about the inline-block display property on Impressive Webs, there was some debate on unwanted whitespace that appears to the right of elements that are styled with this property.

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.

This is an issue that seems to occur in most modern browsers – including IE8 and most versions of Firefox, to name just a couple. The workaround for this problem is actually pretty simple and does not require any crazy HTML markup hacks, as was shown on the site I mentioned above.

First of all, it is important to note that the amount of whitespace that appears to the right of an element that has a display property of inline-block is 4 pixels. Sounds easy to fix, right? Just apply a negative margin-left property of -4px and we’re done, right? Well, not so easy – first, not every browser* applies this 4 pixel gap – and – if the element is marked up as shown below, there will be no whitespace added period – regardless of what browser you are using:

[source language="html"]
<ul>
<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
</ul>
[/source]

*NOTE: IE6 and IE7 do not understand the inline-block property and as such require additional properties of display: inline and zoom: 1 (zoom is used to force hasLayout) in order for them to mimic inline-block. As such, the 4 pixel gap does not get applied to the elements.

The solution then is to apply the rarely-used letter-spacing property and give it a negative value that is equal to the width of the whitespace gap, which in this case if 4 pixels. The property must be applied to the parent element, using our example above, it would be applied to the <ul> tag.

[source language="css"]
ul {
letter-spacing: -4px;
}
[/source]

Finally, you need to ‘undo’ the negative spacing on each of the inline-block elements so that the text contained within does not get affected by the property we set on it’s parent.

[source language="css"]
ul {
letter-spacing: -4px;
}
ul li {
letter-spacing: normal;
display: inline-block;
*display: inline; /* For IE6/IE7 */
zoom: 1; /* For IE6/IE7 */
}
[/source]

I’ve tested this across IE6-IE8, Chrome, Firefox (v3+) and Safari (v4) and it seemed to be working properly. However, when I tested in Opera (v10), the whitespace gap was still there. The fix for this was to apply a word-spacing property to it, using the same value as before:

[source language="css"]
ul {
letter-spacing: -4px;
word-spacing: -4px;
}
ul li {
letter-spacing: normal;
word-spacing: normal;
display: inline-block;
*display: inline; /* For IE6/IE7 */
zoom: 1; /* For IE6/IE7 */
}
[/source]

7 comments

the only font that renders a consistent white-space width across browsers and font sizes is Courier New. it is a fixed width font, and it’s whitespace is 0.63em wide.
see how i use this in my implement of StackLayout CSS layout system:
http://stacklayout.com/philosophy.html

by camslice on April 26, 2011 at 11:00 am. #

As far as I can tell, the width of a single space character is dependent on the it’s font size, so it’s not always going to be 4 pixels wide.

“font-size: 0″ has solved the problem for me, and it is working in the most recent version of FireFox and Chrome. Of course, that’s not good enough in most situations…

by Jonny on April 7, 2011 at 12:35 pm. #

Genius.
Doesn’t remove unwanted white space at the top and bottom of the block though. For that I did the same process with line-height:0; and line-height: normal;

by TjF on March 1, 2011 at 11:41 am. #

font-size: 0px for the win.

I swear I figured this out years ago, but forgot all about it.

Works fine for me in Webkit browsers (Chrome/Safari).

by Evan on January 27, 2011 at 12:15 am. #

i’ve been using this technique for a while. never actually tested in Opera though, so i’ll have to implement the word-spacing property too now, nice one!

i use ems to define the value and have found that -0.34em is pretty much the same across all browsers and font sizes:

letter-spacing:-0.34em;

however the size of a single whitespace can actually differ between fonts. -0.34em works on most of the widely used ‘web safe’ fonts, but i haven’t done extensive testing.

by camslice on December 10, 2010 at 3:20 am. #

Hey Mike,

I actually did mention that this issue could be resolved, except I used “font-size: 0″ as an example, and said there were other similar solutions, yours included (just not specifically mentioned).

Good write-up though, thanks for putting these details together.

by Louis on April 28, 2010 at 4:38 pm. #

Thanks! I had noticed your font-size: 0 solution but found it didn’t work well on WebKit – at least when I tested on Chrome (the whitespace did shrink though – by 2-3 pixels).

by Mike on April 29, 2010 at 8:33 am. #