Removing whitespace around text fields

Trying to be pixel perfect on the Web is like begging to be frustrated. I try to not worry so much about a pixel here or there, but sometimes you just have to get complete control to make things look right.

Until recently I had never paid any special attention to the exact amount of whitespace some browsers create around textarea and input[type="text"] elements, but then I started implementing a design that required there to be exactly no whitespace around them. And I noticed that browser behaviour differs a bit here, so I needed to find a fix.

IE does not seem to add any whitespace at all around text fields. Opera adds none around textareas but a little bit around text inputs on Mac OS X but not on Windows. Firefox adds a bit of vertical whitespace around textareas but not around text inputs. All WebKit-based browsers I have checked in (Safari, Chrome, iCab) add whitespace around both textareas and text inputs regardless of platform. It’s a bit of a mess, as you can see if you open the Removing whitespace around text fields demo page in a few different browsers.

Fortunately there is a simple fix for this:

input,
textarea {
    margin:0;
    vertical-align:bottom;
}

If you want to affect only text inputs you could use input[type="text"] instead of input. Other values for vertical-align, like top or middle, will also work.

Whitespace begone!

Posted on October 17, 2012 in CSS