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

Question

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

Reglas 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 principales 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 separados entre sí 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 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 del elemento a los elementos circundantes, no a la frontera del elemento padre.

Si el margen se contara hasta el límite del elemento padre, colocar elementos en un elemento div introduciría un espacio adicional entre los elementos aunque el 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 un margin-top y margin-bottom . Desea un margen en la parte superior e inferior del artículo, y entre diferentes elementos.

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

Pero estoy de acuerdo, en general, es una característica inútil.

Answer 3

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

Esto se logra fácilmente con el siguiente CSS, porque los márgenes superior e inferior que separan los párrafos se contraerán:

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

Si los márgenes no colapsan, esto provocaría que los márgenes se separen por un espacio de 4em, no de 2em. Sin el colapso del margen, la única forma de lograr el efecto deseado sería establecer algunas reglas adicionales para el primer y último párrafo, lo que implicaría darles una clase o id (que debería mantenerse si alguna vez se modifica el texto) , o envolviéndolos en un elemento adicional que de otro modo sería innecesario y usando: first-child y: last-child, o ... bueno, ya tienes la idea.

Puedo garantizar que, si no se produce el colapso de los márgenes, SO tendría muchas preguntas duplicadas pidiendo soluciones para lograr el espacio constante que proporciona la regla anterior :-)