Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Los márgenes Top y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen.
El colapso de margen ocurre en tres casos básicos:
- Hermanos adjacentes
- Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado luego de los flotantes). Por ejemplo:
<p>El margin bottom de este párrafo es colapsado...</p> <p>...con el margin top de este párrafo.</p>
- Padre y primer/último hijo
- Si no hay un borde, padding, contenido en línea, o limpiado para separar el
margin-topde un bloque delmargin-topde su primer bloque hijo, o no hay borde, padding, contenido en línea,height,min-height, omax-heightpara separar elmargin-bottomde un bloque delmargin-bottomde su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre. - Bloques vacíos
- Si no hay borde, padding, contenido en línea,
height, omin-heightpara separar elmargin-topde un bloque de sumargin-bottom, entonces sus márgenes superiores e inferiores colapsan.
Un colapso de márgenes más complejo (de más de dos márgenes) ocurre cuando estos casos están combinados.
Estas reglas aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo termina fuera de su padre (de acuerdo a las reglas de arriba) fuere o no que el margen del padre sea cero.
Cuando márgenes negativos están envueltos, el tamaño del margen colapsado es la suma del margen positivo más grande y el márgen negativo más pequeño (el más negativo).
Los márgenes de flotantes y elementos con posición absoluta nunca colapsan.
Especificaciones
| Specification | Status | Comment |
|---|---|---|
| CSS Level 2 (Revision 1) The definition of 'margin collapsing' in that specification. |
Recommendation | Initial definition |