Comments on: Eliminating whitespace after display:inline-block elements

By: Vasilis

Vasilis — Thu, 20 May 2010 20:53:27 +0000

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!

By: jason Kuhrt

jason Kuhrt — Thu, 20 May 2010 20:45:20 +0000

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?

By: jason Kuhrt

jason Kuhrt — Thu, 20 May 2010 20:22:09 +0000

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: Klik!

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

By: Mathias Bynens

Mathias Bynens — Sun, 28 Feb 2010 10:27:40 +0000

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.