We recently came across a situation in our markup where we wanted whitespace in the markup for readability, but we didn’t want that whitespace represented between the elements.
We found a fix that suggested using font-size: 0 in CSS to eliminate the whitespace. That worked fine in Chrome, but we found that in Firefox, the containing element no longer scrolled with the mouse wheel or arrow keys! Apparently Firefox’s scroll speed is proportional to font-size.
Here’s a jsFiddle demonstrating the issue (open in Firefox to see the problem, of course).
Ultimately the best solution for us was to eliminate the whitespace in the markup. This StackOverflow question lists a couple creative ways to solve the same problem (using comments in place of whitespace, leaving the whitespace inside the tag).
The CSS3 draft (currently) specifies a text-space-collapse property, but we are targeting IE8 among other browsers, and the draft doesn’t seem to be finalized anyhow.
About the Author
