El modelo de caja CSS2 nos dice que adjoining vertical margins collapse.¿Cuál es el punto de los márgenes de colapso CSS?
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 función?
El significado general de "margen" no es "mover esto por 10px", sino que "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 los párrafos.
Si acaba de dar los párrafos margin-top: 10px y no tenía 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 colapsaron, vacilarí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.
Así que 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".
¡Nunca lo supe, pero estoy contento de haberlo hecho ahora! Muy interesante. –
+1. La misma lógica se aplica fuera de CSS. Por ejemplo, en Microsoft Word, si hay un margen de 12px después de un título y de 6px antes del párrafo, si el párrafo sigue al título, habrá 12px de espacio, no 18px. –
a la derecha - colapsan - A MENOS QUE no sean del mismo nivel dom. P.ej. intente contraer [this] (http://jsfiddle.net/gDuzC/2/) imho simplemente: realmente ES molesto – Toskan
contiguo ** verticales ** márgenes contraer – sam