¿Cuál es el punto de que CSS colapse los márgenes?

80

El modelo de caja CSS2 nos dice que los márgenes verticales adyacentes colapsan .

Lo encuentro bastante molesto, ya que es la fuente de muchos errores de diseño. Espero que al comprender el propósito de colapsar los márgenes, entenderé cuándo usarlos y cómo evitarlos cuando no sean necesarios.

¿Cuál es el propósito de esta función?

w3c css Tom
fuente
3
colapso de los márgenes verticales adyacentes
sam

Respuestas:

101

El significado general de "margen" no es transmitir "mover esto 10px", sino "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 párrafos.

Si solo dio párrafos margin-top: 10pxy no tuviera márgenes en ningún otro elemento, una serie de párrafos se espaciaría maravillosamente. Pero, por supuesto, tendría problemas al colocar otro elemento debajo de un párrafo. Los dos se tocarían.

Si los márgenes no colapsan, dudaría en agregarlos margin-bottom: 10pxa su código anterior, porque entonces cualquier par de párrafos quedaría espaciado 20px, mientras que los párrafos se separarían de otros elementos por solo 10px.

Entonces los márgenes verticales colapsan. Al agregar márgenes superior e inferior de 10 px, estás diciendo: "No me importa qué reglas de margen tengan otros elementos. Exijo al menos 10 px de relleno por encima y por debajo de cada uno de mis párrafos".

VoteyDisciple
fuente
1
+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á un espacio de 12px, no 18px.
Arseni Mourzenko
1
correcto - colapsan - A MENOS que no estén en el mismo nivel de dom. Por ejemplo, intente colapsar este en mi humilde opinión simplemente: realmente ES molesto
Toskan
1
Quieres decir "A MENOS QUE estén dentro de una fila de la tabla". Las filas de la tabla no son elementos a nivel de bloque; tienen algunas reglas únicas. Consulte stackoverflow.com/questions/136727/… para obtener una explicación más completa.
VoteyDisciple
2
¿ margin-topQué tal si agregas el para ese elemento también?
Minh Nghĩa