Entendiendo el colapso de margen
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. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.
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 después de usar los flotantes).
- Padre y primer/último hijo
-
Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el
margin-top
de un bloque delmargin-top
de su primer bloque hijo; o no hay borde, padding, contenido en línea,height
,min-height
, omax-height
para separar elmargin-bottom
de un bloque delmargin-bottom
de 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-height
para separar elmargin-top
de un bloque de sumargin-bottom
, entonces sus márgenes superiores e inferiores colapsan.
Cosas a tener en cuenta:
- Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).
- Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.
- Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).
- Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.
Ejemplos
HTML
<p>El margen inferior de este párrafo está colapsado ....</p>
<p>
... con el margen superior de este párrafo, lo que deja un margen de<code
>1.2rem</code
>
entre ellos.
</p>
<div>
Este elemento padre contiene dos párrafos!
<p>
Este párrafo tiene un margen de <code>.4rem</code> entre él y el texto
anterior.
</p>
<p>
Mi margen inferior se colapsa con mi padre, produciendo un margen inferior
de <code>2rem</code>.
</p>
</div>
<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p>
CSS
div {
margin: 2rem 0;
background: lavender;
}
p {
margin: 0.4rem 0 1.2rem 0;
background: yellow;
}
Result
También puedes ver
- CSS Reference
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.