Eliminar espacio bajo FORM en HTML

Puede parecer bastante trivial, pero este es un problema común que sin saber la solución específica puede resultar bastante molesto. Se trata de la línea adicional que algunos browsers añaden bajo un FORM. Esto se nota mucho en casos en que el alineamiento vertical resulta relevante, como cuando el formulario está dentro de una celda de una tabla. Este problema lo tratamos en particular al trabajar dos versiones de un mismo documento:

  • Una XHTML Strict sobre Firefox, donde todo aparecía bien.
  • Una en modo Quirks en Internet Explorer 6, donde sí se veía la lína.

Causas

Esta línea es agregada por los browsers como un adicional al objeto FORM. En estricto rigor se agrega un espacio abajo y arriba del FORM, excepto cuando éste está dentro de una celda, en cuyo caso sólo se agrega el espacio de abajo.

La razón se encuentra en que el objeto FORM es un elemento del tipo block, lo que implica que siempre se considera al menos un quiebre de línea cuando éste termina. Otro ejemplo de objeto block es DIV.

Solución

La forma más simple para browsers relativamente modernos es usar CSS con la siguiente propiedad sobre el objeto FORM, no sobre la tabla u otro elemento contenedor:

margin-top:0px;
margin-botton:0px;

Esto para sacar el margen superior e inferior respectivamente.