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?
Respuestas:
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".
margin-topQué tal si agregas el para ese elemento también?