
Buen viejo margen colapsando

Aquí hay una publicación de blog de una oración sobre el colapso de márgenes: cuando dos elementos de bloque se apilan uno encima del otro, el espacio vertical entre ellos es mayor entre el de arriba margin-bottom
y el de abajo margin-top
.
Es un poco extraño y ascii-encogido de hombros. Un par de advertencias con ellos, como era de esperar.
Me parece fascinante cómo se convierte en el tipo perfecto de mini publicación de blog cuando la gente tiene un momento de ah-ha al respecto. MDN incluso considera oportuno tener una página dedicada .
Adam Roberts en 2015 :
Aunque el comportamiento de colapso del margen es un poco poco intuitivo al principio, facilita la vida en el caso de múltiples elementos anidados, donde el comportamiento suele ser deseable.
Andrew Grant en 2015 :
Probablemente no sea el aspecto más intuitivo de CSS, pero la conclusión aquí es que hay cierta lógica en juego y, una vez que la has aprendido, ¡el misterio y la confusión desaparecen de repente!
Geoff Graham en 2015 :
¿Ves cómo el colapso de los márgenes puede complicar las cosas? Personalmente, me encuentro con esto con una frecuencia frustrante cuando trato con la tipografía.
Magnus Benoni en 2016 :
Puede ser frustrante lidiar con el colapso de los márgenes, pero saber cuándo y cómo sucede le facilitará solucionar los problemas cuando ocurran.
Ire Aderinokun en 2017 :
Los márgenes colapsables pueden ser una molestia si no se comprende adecuadamente cuándo ocurren. El primer paso para abordarlos o evitarlos es comprender exactamente a qué caso de márgenes colapsables nos enfrentamos.
Adam Laki en 2018 :
El colapso del margen es algo que se menciona en el primer o segundo capítulo de cada libro de CSS. Cuando me enteré de las hojas de estilo hace mucho tiempo, por supuesto, leí sobre ello.
Jonathan Harrell en 2018 :
El concepto de colapso de márgenes es fundamental para comprender el modelo de caja en CSS, pero en realidad es bastante complejo y potencialmente confuso. La especificación que describe cómo funciona el colapso del margen es exhaustiva pero difícil de entender.
No menciono todo esto para decir que sea un tema muy blogueado (nada lo es), sino que es un hilo interesante a seguir. Cuando tanta gente siente la necesidad de explicar algo, en última instancia, tan pequeño, algo extraño (probablemente malo) está sucediendo allí.
Sin duda es por eso que se considera uno de los errores en el diseño de CSS :
Nunca se debería haber permitido que los márgenes superior e inferior de un cuadro colapsen juntos automáticamente, ya que esta es la raíz de todos los males del colapso de márgenes .
El énfasis es suyo y es, de hecho, el único texto en negrita en toda la lista.
Si está buscando detener el comportamiento, necesitará hacer algo que probablemente tenga más efectos secundarios de los que vale, como hacer flotar los elementos. No es tan sencillo como iniciar un nuevo contexto de formato de bloque , ya que eso es lo que display: flow-root;
funciona y lo que no .
Probablemente sea mejor que lo conozca y lo afronte cuando surja con márgenes que fluyen sistemáticamente en una dirección o se vuelva raro .
Deja una respuesta