We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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-top de un bloque del margin-top de su primer bloque hijo, o no hay borde, padding, contenido en línea, height, min-height, o max-height para separar el margin-bottom de un bloque del margin-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, o min-height para separar el margin-top de un bloque de su margin-bottom, entonces sus márgenes superiores e inferiores colapsan.
Cosas a tener en cuenta:
  • 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) independiente de si el margen del padre es 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 aplica tanto a los elementos adyacentes como a los elementos anidados.

 

Los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

Especificaciones

Specification Status Comment
CSS Level 2 (Revision 1)
La definición de 'margin collapsing' en esta especificación.
Recommendation Initial definition

También puedes ver

Etiquetas y colaboradores del documento

Colaboradores en esta página: Ralexhx, javichito
Última actualización por: Ralexhx,