HTML input type="submit" doubles row height in table

Question

I have a HTML table where some rows have a button like this:

  <td >
    <form action="..." method="GET">
      <input type="submit" value="..."/>
    </form>
  </td>

The rows with the input have about twice the height of other rows that have otherwise similar data. When I remove the just the input, the row height goes back to normal. I have the same behavior in Firefox and IE.

Is there any way I can have normal row height AND the button?

Answer 1

The <form> tag adds some white space by default in most browsers. That's likely the problem. Try adding the following to your cascading style sheet:

form {
    padding: 0;
    margin: 0;
    display: inline;
}

Failing that, we can "brute force" some other options in:

input {
    margin: 0;
    display: inline;
}
td {
    padding: 0;
}

(Of course, substituting more specific selectors if possible.)

If even that doesn't work, try using a tool like Firebug to identify where else the space could be coming from.