Problems with extra vertical space after forms

To prevent extra spacing below a form, it is usually sufficient to set the form element’s bottom margin to zero, e.g.
<form style="margin-bottom: 0" ...>
However, for older browsers, additional methods might be needed.

Analysis of the problem

Browsers typically leave some empty space, roughly corresponding to one empty line, after a form. The problem discussed here is often classified as “extra vertical space after a submit button”, but this is not the correct diagnosis. Rather, it’s about spacing below the entire form, but it is observed especially often when a form contains just an input button (often inside a table cell.

In fact, browsers usually leave empty space before and after a form. This is even reflected in the sample style sheet for HTML 4 in the CSS 2 specification. It contains
FORM { margin: 1.33em 0 }
which means setting the top and bottom margin to 1.33em and left and right margin to 0. Actual browser behavior is close to this. If you are using a CSS-enabled browser, you will probably notice the effect below. The markup is
text before form<form action="...">content in form</form>text after form
with a style sheet that sets a border for the form, and the rendering is:

(In modern Mozilla browsers, such as Firefox 2, the bottom margin is not present by default, except in Quirks Mode.)

But within a table cell, browsers typically suppress the top margin. The behavior may sound odd, and it is fairly odd, but browsers suppress vertical margins around block elements inside table cells in other contexts too. (For example, if you have a paragraph as the only content of a cell, then both the top and bottom margin are typically left out.) Anyway, this is why authors usually see the problem as extra vertical space below some construct.

The following example illustrates the problem. On the left, there is HTML code for a very simple form enclosed into a single-cell table. In the middle you will see it as rendered by your current browser, possibly under the influence of an author style sheet. (That style sheet suggests some padding and a border around the form. This may help in seeing which parts of the visual presentation are relate to a form.) On the right there is a screenshot from Internet Explorer 4.0 displaying the form.

<table><tr bgcolor="yellow"><td> <form action="/cgi-bin/run/~jkorpela/echo.cgi"> <input type="submit" value="Send"> </form> </td></tr></table>

On most graphic browsers, the form is displayed with some yellow rectangle under the submit button. It’s yellow due to the background color of the table cell. In the IE 4.0 screenshot, and quite possibly on your current browser too, the form itself has a different background color due to an author style sheet. Its presence is not dependent on the submit button; if you replace the button with some plain text, for example, the extra space is still there.

Neither is the extra space dependent on the table markup surrounding the form. Typically browsers leave some extra space around cell contents and between cells. But removing that with cellpadding="0" cellspacing="0" in the table tag does not help. (On the right you can see what the simple table we’re discussing looks like on your browser with those attributes set. The attributes may remove some horizontal and vertical spacing, typically a few pixels worth, but they don’t affect the extra vertical space which is caused by many browsers’ method of presenting forms.)

Thus, the extra vertical space is not dependent on the submit button, or on the markup surrounding the form, and it is not part of the form. It is space left by a browser after a form.

A form element in HTML is, by definition, a block-level element. It is thus quite natural that browsers render form elements in a block-like manner, often with some empty vertical space before and/or after. This can be compared to typical renderings of paragraphs (p elements), block quotations (blockquote elements), tables, and preformatted texts (pre elements).

Usually people don’t notice the extra space. Rather, it’s taken as a natural thing, separating a form from the text or other material that follows it. It’s mostly when authors put forms into tables that the extra space becomes a problem.

Quite often, probably most often, the best solution is to take a different approach; see the document How to use tables to structurize forms in HTML.

What about the trick of moving the end tag?

Assuming you still want to try to suppress the extra vertical space, let’s see what you could do. First we can exclude the possibility of using HTML markup. There are a few presentational elements and attributes in HTML, but none of them is applicable here; you could manage to add some vertical space but not reduce it.

It is sometimes suggested e.g. that the end tag </form> be moved outside the table cell even if the start tag <form> is inside the cell. This might make some browsers leave the extra space after the table, not inside a cell. But it would be grossly invalid markup with unpredictable results on various browsers. So the cure would be worse than the disease - risking the entire functionality of the page for merely esthetic reasons (which are matters of taste). It utilizes an undocumented feature in some browsers’ “tag soup” processing, which is one of the reasons we have the problem in the first place: browsers have assumably been programmed to leave some space when they see </form>.

The CSS solutions

So what about style sheets? Thinking in terms of CSS, it is natural to assume that the vertical space is either a bottom margin or bottom padding for the form. And in fact, on most modern browsers, setting a value for the margin-bottom property affects the rendering. You could also set margin to zero, which by definition means setting the margin on each or the four sides to zero.

The following example is the same as our simple example at the beginning but with a style sheet suggesting margin-bottom:0 for the form. The last cell shows the rendering on IE 4.0, demonstrating that the method works even on that old browser.

<table><tr bgcolor="yellow"><td> <form style="margin-bottom:0;" action= "/cgi-bin/run/~jkorpela/echo.cgi"> <input type="submit" value="Send"> </form> </td></tr></table>

On Netscape 4, this simple approach fails, however. That browser effectively adds the suggested margins to its default margins, so any simple attempt to remove margins fails on it.

Alternatively, you could set display: inline for the form element. This too works on modern browsers, though the setting may have some undesired side effects that need to be considered if the form is not very simple). It fails on Netscape 4, but Michael Gilsdorf has described a workaround that works on it, too: put the form inside a div element and set display: inline for both of them, and set the margin to zero too, just to be safe:

<div style="display: inline;">
<form style="display: inline; margin: 0;" ...>
  content of the form
</form>
</div>