¿Por qué razón las reglas de colapso de margen se introdujeron en CSS?

Question

Simplemente no puedo entender la situación cuando este ingenioso conjunto de reglas puede ser útil. Rompen la simplicidad del modelo de caja y proporcionan una fuente infinita de problemas cuando combina diferentes piezas de diseño. Entonces, ¿cuál es el motivo?

Rules para la referencia.

Actualización: Las reglas son bastante lógicas para los elementos hermanos, pero ¿por qué los márgenes deberían propagarse a los elementos primarios hasta el árbol? ¿Qué tipo de problemas resuelve?

Por ejemplo:

<div style="margin: 20px; background-color: red;"> 
    <div style="margin: 20px;"> 
     <p style="margin: 100px;">red</p> 
    </div> 
</div> 
<div style="margin: 20px; background-color: blue;">blue</div> 

divs de nivel superior están espaciados uno de otro por 100px.

Answer 1

Esta es una de las situaciones en las que realmente no tiene sentido hasta que te das cuenta de que las alternativas tienen menos sentido.

Como probablemente sepa, los márgenes especifican la distancia entre los elementos, no es un "relleno externo" que rodea cada elemento. Si dos elementos con el margen 20px están uno al lado del otro, la distancia entre ellos es 20px, no 40px.

Como el margen es una distancia a otro elemento, tiene sentido que la distancia sea desde el elemento hasta los elementos circundantes, no hasta el límite del elemento principal.

Si el margen se cuenta en el límite del elemento principal, poner elementos en un elemento div introduciría espacio adicional entre los elementos aunque el propio div no tenga margen o relleno. Los márgenes alrededor de un elemento deben permanecer iguales si agrega un div sin estilo a su alrededor.

Answer 2

¿Cuándo podría ser útil?

El ejemplo más simple: una lista de párrafos y encabezados, cada uno con margin-top y margin-bottom. Desea un margen en la parte superior e inferior del artículo, y entre los diferentes elementos.

Con colapso de margen, puede hacerlo sin establecer márgenes especiales en el primer o último elemento (¡NO es parte de la especificación original de CSS!) O en el contenedor.

Pero estoy de acuerdo, en general, es una característica sin sentido.

Answer 3

Considere un cuerpo de texto que contenga varios párrafos. Desea que cada párrafo esté separado por 2em, y desea que el primer párrafo se separe del contenido anterior por 2em y que el último párrafo se separe del contenido siguiente por 2em.

Esto se logra fácilmente con la siguiente CSS, debido a que los márgenes superior e inferior que separan los párrafos colapsarán:

p { 
    margin-top: 2em 
    margin-bottom: 2em; 
} 

Si los márgenes no colapsaron, esto resultaría en los márgenes estando separados por un espacio de 4em, no 2em. Sin colapso de margen, la única forma de lograr el efecto deseado sería establecer algunas reglas adicionales para el primer y el último párrafo, lo que implicaría darles una clase o identificación (que debería mantenerse si el texto se altera alguna vez). , o envolverlos en un elemento extra que de otra manera sería innecesario y usar: first-child y: last-child, o ... bueno, entiendes la idea.

puedo garantizar que, si no se produjo el colapso de margen, esto habría muchas preguntas duplicadas pidiendo soluciones para lograr la separación consistente de que la regla anterior proporciona :-)