Life @ High Road Communications

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:

<ul>
	<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
</ul>

*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.

ul {
	letter-spacing: -4px;
}

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.

ul {
	letter-spacing: -4px;
}
	ul li {
		letter-spacing: normal;
		display: inline-block;
		*display: inline; /* For IE6/IE7 */
		zoom: 1; /* For IE6/IE7 */
	}

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:

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 */
	}