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… 
0 Responses to “Remove unwanted line-space when designing a form in HTML”