Nerd 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

Comments

  1. I had seen some fixes for this behavior using a negative value for letter-spacing (again, based on the font used), or by using font-size: 0; on the wrapper element (UL in 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.

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

  3. 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?

    • Vasilis
    • #

    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!