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

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.