This article was written in 2010. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
Eliminating whitespace after display:inline-block elements
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.
I had seen some fixes for this behavior using a negative value for
letter-spacing(again, based on the font used), or by usingfont-size: 0;on the wrapper element (ULin this case) but this is way better. Nice work!You might want to consider adding
'monospace'to your font declaration, in the rare case neither Courier New nor DejaVu Sans Mono are installed.It seems like this solution doesn’t have too many implications for future overhead / typography complications. The only other solution I’ve seen as elegant is a javascript solution. See it here: http://mrclay.org/tests/inline-block-whitespace.html
I’m thinking that maybe the JS version should be used and have this CSS method called upon as a backup if JS is turned off.
But if this proves robust enough then maybe that’s not needed.
Cheers
I seem to have found an issue where in Webkit there is a 1px gap but in FF (Gecko) there is no gap. Fixing the 1px gap in Webkit means losing 1px in FF.
Anyone else having this issue?
I came to the conclusion that you shouldn’t use display:inline-block if you wnat a pixel perfect layout. Since I really can’t be bothered by single pixel differences I’m not even thinking of trying to find a solution for this webkit/gecko thing.
But it’s certainly a good thing that people should be warned about the possible shortcomings of this technique, so thanks a lot for your feedback, Jason!