Encontrará muchos problemas extraños al diseñar páginas web CSS. Estos problemas pueden deberse a errores del navegador o a una comprensión insuficiente de las propiedades de CSS. Este artículo analiza el tema de la superposición de márgenes CSS. La fusión de márgenes significa que cuando dos márgenes verticales se encuentran, forman un solo margen. La altura del margen fusionado es igual a la mayor de las alturas de los dos márgenes fusionados. La fusión (superposición) de márgenes es un concepto bastante simple. Sin embargo, cuando se trata de diseñar páginas web en la práctica, puede causar mucha confusión. Cuando un elemento está contenido dentro de otro elemento (asumiendo que no hay relleno o borde que separe los márgenes), sus márgenes superior y/o inferior también se fusionan. Por favor mire la imagen a continuación: Aunque parezca extraño, los márgenes pueden incluso fusionarse consigo mismos. Supongamos que tiene un elemento vacío que tiene márgenes pero no tiene borde ni relleno. En este caso, el margen superior y el margen inferior se tocan y se fusionan: Si este margen encuentra el margen de otro elemento, también se fusionará: Es por eso que una serie de elementos de párrafo ocupan muy poco espacio, porque todos sus márgenes se fusionan para formar un pequeño margen. La fusión de márgenes puede parecer un poco extraña al principio, pero en la práctica tiene sentido. Tomemos, por ejemplo, una página de texto típica que consta de varios párrafos. El espacio encima del primer párrafo es igual al margen superior del párrafo. Sin fusión de márgenes, los márgenes entre todos los párrafos posteriores serán la suma de los márgenes superior e inferior adyacentes. Esto significa que el espacio entre párrafos es dos veces más grande que la parte superior de la página. Si se produce una fusión de márgenes, los márgenes superior e inferior entre los párrafos se fusionan, de modo que las distancias en todas partes sean consistentes. La combinación de márgenes solo ocurre para los márgenes verticales de los cuadros de bloque en el flujo normal de documentos. Los márgenes entre cuadros en línea, cuadros flotantes o cuadros con posición absoluta no se combinan.
Cuando un elemento aparece encima de otro elemento, el borde exterior inferior del primer elemento
