w3c - example - ¿Cuál es el punto de los márgenes de colapso CSS?

margin collapse css

Question

El modelo de caja CSS2 nos dice que los márgenes verticales contiguos colapsan .

Me resulta bastante molesto, ya que es el origen de muchos errores de diseño. Espero que al comprender el propósito del colapso de los márgenes, entienda cuándo usarlos y cómo evitarlos cuando no los necesiten.

¿Cuál es el propósito de esta característica?

Answer 1

El significado general de "margen" no es transmitir "mover esto por 10px" sino más bien, "debe haber 10px de espacio vacío al lado de este elemento".

Siempre he encontrado que esto es más fácil de conceptualizar con párrafos.

Si acaba de dar párrafos margin-top: 10px y no tiene márgenes en ningún otro elemento, una serie de párrafos se espaciaría maravillosamente. Pero, por supuesto, tendrías problemas al colocar otro elemento debajo de un párrafo. Los dos tocarían.

Si los márgenes no se colapsan, dudaría en agregar margin-bottom: 10px a su código anterior, porque entonces cualquier par de párrafos se espaciaría 20px, mientras que los párrafos se separarían de otros elementos solo por 10px.

Entonces, los márgenes verticales colapsan. Al agregar márgenes superiores e inferiores de 10px, usted está diciendo: "No me importa qué reglas de margen tengan otros elementos. Exijo al menos 10px de margen arriba y debajo de cada uno de mis párrafos".