html - texto - ¿Por qué no se colapsa el margen de una<table> con un<p> adyacente?

salto de linea html

Question

Desde mi comprensión de la especificación CSS, una tabla encima o debajo de un párrafo debe colapsar los márgenes verticales con ella. Sin embargo, eso no está sucediendo aquí:

table {
  margin: 100px;
  border: solid red 2px;
}
p {
  margin: 100px
}

<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>

<p>This is a paragraph with 100px margin all around.</p>

Pensé que habría 100px entre los dos elementos, pero hay 200px, los márgenes no se están colapsando.

Por qué no?

Editar: Parece ser el error de la tabla: si duplico la tabla y duplico el párrafo, los dos párrafos colapsarán los márgenes. Las dos tablas no lo harán. Y, como se señaló anteriormente, una tabla no colapsará los márgenes con un párrafo. ¿Es este comportamiento obediente?

table {
  margin: 100px;
  border: solid red 2px;
}

<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      This is a one-celled table with 100px margin all around.
    </td>
  </tr>
</table>

p {
  margin: 100px
}

<p>This is a paragraph with 100px margin all around.</p>
<p>This is a paragraph with 100px margin all around.</p>

Answer 1

Creo que esto se debe a diferentes implementaciones de navegador de CSS. Acabo de probar tu código, y Firefox3 no colapsa el margen vertical, pero IE7 y Safari3.1.2 lo hacen.

Answer 2

El colapso del margen solo se define para elementos de bloque. Pruébalo - agrega display: block los estilos de tabla, y de repente funciona (y altera la visualización de la tabla ...)

Las tablas son especiales. En las especificaciones de CSS, no son elementos del bloque: se aplican reglas especiales para el tamaño y la posición, tanto de sus hijos (obviamente) como del elemento de la table sí.

Especificaciones relevantes:

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/visuren.html#blockbox

Answer 3

Originalmente pensé que Firefox 3 no está cumpliendo con esta parte de la especificación de CSS :

Varios valores de la propiedad ''display'' crean un elemento block-level: ''block'', ''list-item'' y ''run-in'' (parte del tiempo, ver recuadros de ejecución) y ''table''.

Lo digo porque la especificación dice lo siguiente sobre el colapso de los márgenes ...

Dos o más márgenes verticales contiguos de cajas de bloques en el colapso de flujo normal.

... y configurando el estilo de la tabla para display: block hace que el margen se colapse como era de esperar y lo vuelva a configurar para display: table deshace el colapso nuevamente.

Pero mirándolo de nuevo, la especificación también dice esto (el énfasis es mío):

Los elementos de nivel de bloque (a excepción de los elementos de ''tabla'' de visualización , que se describen en un capítulo posterior) generan un cuadro de bloque principal ... Los cuadros de bloque principales participan en un contexto de formato de bloque.

Y luego, en la sección Contexto de formato de bloques :

Márgenes verticales entre cuadros de bloque adyacentes en un colapso de contexto de formato de bloque.

La lectura me hace pensar que es correcto que los márgenes entre una tabla (que no participa en un contexto de formato de bloque) y un párrafo (que sí lo hace) no se colapsen.

Answer 4

Según entiendo, los márgenes verticales solo colapsan entre la tabla y el título [1]. De lo contrario, una tabla debería comportarse como cualquier otro elemento de bloque [2] (es decir, 2 elementos con márgenes de 100px = 200px entre ellos).

1. http://www.w3.org/TR/CSS2/tables.html#q5
2. http://www.w3.org/TR/CSS2/box.html