css - previniendo - margin collapse

¿Por qué motivo las reglas de colapso de margen se introdujeron en CSS?

Question

Simplemente no puedo entender la situación cuando este conjunto inteligente 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?

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 principales hasta el árbol? ¿Qué tipo de problemas que soluciona?

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>

Los divs de nivel superior están separados unos de otros por 100px.

Answer 1

¿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 un margin-bottom . Desea un margen en la parte superior e inferior del artículo, y entre diferentes elementos.

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

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

Answer 2

Considere un cuerpo de texto que contiene varios párrafos. Desea que cada párrafo esté separado por 2em, y 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 colapsarán:

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

Si los márgenes no se colapsaran, los márgenes se separarían por un espacio de 4em, no 2em. Sin el colapso de los márgenes, la única forma de lograr el efecto deseado sería establecer algunas reglas adicionales para los párrafos primero y último, lo que implicaría darles una clase o una identificación (que se mantendrían si el texto se modificara). , o envolviéndolos en un elemento adicional que de otra manera no sería necesario y usando: primer hijo y: último hijo, o ... bueno, entiendes la idea.

Puedo garantizar que, si no se produce el colapso del margen, SO tendrá muchas preguntas duplicadas que solicitan soluciones para lograr el espaciado consistente que proporciona la regla anterior :-)

Answer 3

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 exterior" que rodea a cada elemento. Si dos elementos con el margen 20px están uno junto al otro, la distancia entre ellos es de 20px, no de 40px.

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

Si el margen se contabilizara hasta el límite del elemento padre, colocar los elementos en un elemento div introduciría un espacio adicional entre los elementos, aunque el div sí no tenga margen o relleno. Los márgenes alrededor de un elemento deben permanecer iguales si agrega un div a su alrededor.