Unwanted whitespace between elements

January 21, 2012 Mark Rushakoff

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

Biography

More Content by Mark Rushakoff
Previous
node.js and Cloud Foundry
node.js and Cloud Foundry

Cloud Foundry is a sponsor and participant in this week’s Node Summit in San Francisco, so it is a good tim...

Next
College Sports Anytime, Anywhere with the NCAA iPhone App
College Sports Anytime, Anywhere with the NCAA iPhone App

Watching the latest NCAA sports reel from the comfort of your own couch is not always a reality. For all t...

Enter curious. Exit smarter.

Learn More