html form tag without the top/bottom padding
This seems like such a simple thing, but I’m really happy to be able to add it to my collection of useful code snippets:
The important part (HTML code snippet):
<form style=”display: inline; margin: 0px;”>
Explanation/history/context:
For years, now, I’ve just accepted (but been annoyed by) the fact that the HTML FORM tag causes some whitespace to display above and below the form contents:
| html | screenshot |
|---|---|
| Form outside table:Text above table <form> <table border=”1″> <tr> <td>table cell</td> </tr> </table> </form> Text below table |
 |
One common way of avoiding that whitespace padding is to stick the FORM tag inside a TABLE tag, floating freely without being inside any particular row/cell, like this:
| html | screenshot |
|---|---|
| Form inside table:Text above table <table border=”1″> <form> <tr> <td>table cell</td> </tr> </form> </table> Text below table |
 |
I’ve never bothered to find a better way, until recently, when I decided that I didn’t like HTML validators complaining about that. So I searched and found a method of avoiding that whitespace that’s simple, seems to work fine in multiple browsers, and passes HTML validation:
| html |
|---|
| Form outside table with style:Text above table <form style=”display: inline; margin: 0px;”> <table border=”1″> <tr> <td>table cell</td> </tr> </table> </form> Text below table |
| screenshot |
 |
subscribe to entries feed
June 7th, 2006 at 8:32 pm
Dang– it is too bad I didn’t start reading your blog earlier. I just tackled the same issue in April. If I had been regularly reading your blog, I could have bypassed some research time!
:)
Vicky (Carolyn’s Sister)
P.S. I’m going to put you on my Google Reader, so next time I can put your knowledge to work!