End Form Element Layout Issues With CSS

End Form Element Layout Issues With CSS

Seasoned web designers are all too familiar with form element margins. More often than not, the form element will break the layout on one of the major browsers, because of how the browser handles the default margins of that element. A common fix for handling the strange margin problems that occur is to move the form elements around in the HTML until the layout renders correctly.

Fortunately, CSS provides an extremely simple solution to the rogue margins of form elements. If you set the form element’s margin to zero in CSS, margins will no longer be an issue.

form { margin:0; }

It’s an easy fix to an ongoing and annoying problem in web design.

Jon Henshaw
Co-Founder and President

Jon is the Co-founder and President of Raven Internet Marketing Tools.

Jon is the Co-founder and President of Raven Internet Marketing Tools.

  • http://www.wizardworks.ca JimM

    Your solution also works very well with and elements as well. It just requires 1 more declaration. ul,ol {margin:0; padding:0;}

    It is great when the best solutions are the simplest.


  • http://raventools.com/ Jon Henshaw

    Jim, that’s right. I actually wrote a post about that a little while ago.


    I isolated the form element, because most people don’t know or remember that the form element can have properties, and can be controlled just like any other element.

  • Todd Levy

    If you really want to start at the top, begin your stylesheet with a universal selector…

    * {margin:0;padding:0;}

    …which will reset margins and padding on all elements.

    Hope someone finds this helpful.


  • http://raventools.com/ Jon Henshaw

    Todd, I recently noticed that approach on A List Apart‘s base CSS. Seems like a smart way to start. Thanks for the tip!