Josh Comeau cubre el concepto de colapso de márgenes:
Esta idea puede sonar simple, pero si ha estado escribiendo CSS por un tiempo, es casi seguro que se ha sorprendido cuando los márgenes no colapsan o colapsan de formas extrañas e inesperadas. En los proyectos del mundo real, todo tipo de circunstancias pueden complicar las cosas.
Lo básico que debes saber:
- El colapso del margen solo ocurre en la dirección del bloque. Esto es cierto incluso si cambia el modo de escritura o usa propiedades lógicas.
- El mayor margen “gana”
- Cualquier elemento intermedio anulará el colapso (si estamos hablando del colapso dentro de los padres, incluso un poco de relleno o borde será lo intermedio y evitará el colapso, como señaló Geoff cuando lo cubrió).
Pero se vuelve mucho más raro:
- Los márgenes pueden colapsar incluso cuando no son de elementos hermanos.
- Los márgenes en la misma dirección de diferentes elementos también pueden contraerse.
- Los márgenes de cualquier número de elementos pueden contraerse.
- Los márgenes negativos también colapsan, pero es el número negativo mayor el que gana.
- Si se trata de un montón de elementos, todos con diferentes márgenes, básicamente debe aprender un algoritmo para comprender qué sucede y por qué.
Es lamentable que esas cosas sucedan en absoluto. Puede ser frustrante para cualquier nivel de habilidad. Estas son peculiaridades de CSS que deben enseñarse explícitamente, en lugar de sentirse como una parte natural de un sistema. Incluso el grupo de trabajo de la CSS lo considera un error:
Nunca se debería haber permitido que los márgenes superior e inferior de un solo cuadro se colapsaran automáticamente, ya que este es el raíz de todo mal que colapsa los márgenes.
😬
No sé si el colapso del margen causa problemas épicos en el CSSin diario, pero debes admitir que esto es complicado en el mejor de los casos.
También pienso en cómo fue. una cosa este año para sugerir centrar el contenido a través de la cuadrícula CSS y colocar todos los elementos en el medio de una cuadrícula de tres columnas. .grid-wrapper > * { grid-column: 2; }. El punto es que todavía tiene la cuadrícula completa para trabajar, por lo que es más fácil hacer que los elementos únicos se desborden completamente, de borde a borde (o use el espacio de otra manera). Pero cuando hace eso, los elementos se convierten en elementos de cuadrícula y están fuera del flujo normal, por lo que no colapsará el margen. Eso solía sentirse como un golpe contra esta técnica, al menos para mí, ya que sería inesperado. Pero ahora que pensamos en lo inestable que es el colapso de los márgenes, tal vez evitar el colapso de los márgenes sea otra ventaja más de este tipo de técnica.
Enlace directo →