Las reglas del colapso de los márgenes

Josh Comeau cubre el concepto de colapso de márgenes:

Esta idea puede parecer simple, pero si ha estado escribiendo CSS por un tiempo, seguramente se habrá sorprendido cuando los márgenes no colapsan o colapsan de maneras extrañas e inesperadas. En proyectos del mundo real, todo tipo de circunstancias pueden complicar las cosas.

Lo básico que debes saber:

• El colapso del margen sólo ocurre en la dirección del bloque. Esto es cierto incluso si cambia el modo de escritura o utiliza propiedades lógicas.
• El mayor margen “gana”
• Cualquier elemento intermedio impedirá el colapso (si estamos hablando de un colapso interno, 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 extraño:

• Los márgenes pueden colapsar incluso cuando no provienen de elementos hermanos.
• Los márgenes en la misma dirección provenientes de diferentes elementos también pueden colapsar.
• Los márgenes de cualquier cantidad de elementos pueden colapsar.
• 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 márgenes diferentes, básicamente debes aprender un algoritmo para comprender qué sucede y por qué.

Es lamentable que esas cosas sucedan. Puede resultar 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 CSS lo considera un error:

Nunca se debería haber permitido que los márgenes superior e inferior de un solo cuadro colapsen juntos automáticamente, ya que esta es la raíz de todo el mal que colapsa los márgenes .

No sé si el colapso de los márgenes causa problemas épicos en el uso diario de CSS, pero debes admitir que esto es, en el mejor de los casos, complicado.

---

También pienso en cómo este año fue habitual sugerir centrar el contenido a través de una 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 tienes la cuadrícula completa para trabajar, por lo que es más fácil hacer que los elementos únicos tengan sangrado completo, de borde a borde (o usar el espacio de otra manera). Pero cuando haces eso, los elementos se convierten en elementos de la cuadrícula y están fuera del flujo normal, por lo que no colapsarás los márgenes. Eso solía parecer un golpe contra esta técnica, al menos para mí, ya que sería inesperado. Pero pensando ahora en lo desagradable 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.