Remove unwanted line-space when designing a form in HTML

Here’s a little tip that not everyone will know, and one that made my life a whole lot easier when I first discovered it.

Say you’re designing a form on a page that has pixel perfect layout.  Everything is looking great, but there is one problem:

you can’t figure out why there is a line-space underneath the submit button!

.. and this throws out your whole design.  How frustrating.

For an example (not of pixel perfect design, I hasten to add, just a quickly knocked up demo…) see the image below:

Notice the space below the ‘Unpublish’ button, when there is none below the ‘Publish’ button?

The cause of this issue is one that is not particularly obvious - the form tag itself. If you’re like me, then you’ll tend to imagine the form tag as being some transparent wrapper that simply tells a browser that these fields and buttons make up a particular form.  Wrong…

It turns out, that although invisible, the form tag does actually take up space, and this is what is causing the problem.  The fix is to zero the margins on the form, which can be done in one of two ways:

Inline stylesheet

Add the following to your form tag:

<form action=”blah” method=”post” style=”margin:0;”>

This will zero the margin for this particular form, and remove the space for you.

External stylesheet

If you want to solve the problem for any and all forms held on your page in one fell swoop, then this is the approach for you.  In your external stylesheet, add:

form {

margin: 0;

}

This will remove the margin for all forms you have.

Actually, good coding practice says that you should really zero the margin of all elements to standardise the look of your site across browsers, but that’s for another story… :)

Some other interesting posts:

3 Responses to “Remove unwanted line-space when designing a form in HTML”


  1. 1 Mackeran

    Thank you! You often write very interesting articles. You improved my mood.

  2. 2 Fuzu

    Ooh shoot i just wrote a big comment and as soon as i hit post it come up blank! Please please tell me it worked right? I do not want to write it again if i do not have to! Either the blog glitced out or i am an idiot, the second option doesnt surprise me lol.

  3. 3 donald adamczyk

    Hello just thought i will let you know i had a problem with this blog appearing frozen also. Must be monkeys in the page.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*
RSS for Posts RSS for Comments