I read an article on Matt Wilcox’ blog about the whitespace adjacent to every inline-block element. I wondered if this whitespace has a default size. At first it looked like there’s no default size. I started some tests with a lot of inline-block elements, all with different letters and symbols in them. I contained these elements inside four containers, all with different font sizes. Here’s the first test I did.
I started looking for the exact negative right margin to add to every element in order to eliminate the whitespace. I couldn’t find it. Margin-right: -.3em; came very close but in some browsers it was -.268em and in others even less. There was no exact unit. After chatting with @kuvos I realized I was using the wrong font. So I tried Courier New.
To keep a long story short, the white space with Courier New is exactly 0.6em in all browsers. See the original test page and a simple layout test page and please test them in all your browsers.
Bugs and shortcomings
- The biggest bug, or flaw, of course is that Courier New is not installed on all operating systems. On my Kubuntu VM all test pages look horrible. Workaround seems to be to add ‘DejaVu Sans Mono’ to the font-stack which luckily has the same white space.
- This doesn’t work with some font-sizes since browsers have to round to a pixel. Choose an easy to use base font-size where 0.6em is equal to an exact amount of pixels for your layout to avoid this bug.
- I know that in IE8 with the original test there’s some kind of moiré effect going on. That doesn’t seem to happen with the layout page.
- Opera 10.5b on my Mac seems to consider the whitespace non-existent and renders the simple test page as if it’s a single word without spaces, so the elements don’t wrap. I think that’s a bug. But it’s actually a good test to check if the number is exact (-:
- IE7 and lower don’t understand display:inline-block; See the simple workarounds in the test pages.