Modelo de cuadro: fusión de márgenes externos de CSS
- Página anterior Márgen externo de CSS
- Página siguiente Resumen de posicionamiento de CSS
La fusión de márgenes externos se refiere a que cuando dos márgenes verticales se encuentran, se formará un margen.
La altura del margen fusionado es el mayor de los dos márgenes que se fusionan.
Fusión de márgenes externos
La fusión de márgenes externos (superposición) es un concepto bastante simple. Sin embargo, en la práctica del diseño de páginas web, puede causar muchas confusiones.
En términos simples, la fusión de márgenes externos se refiere a que cuando dos márgenes verticales se encuentran, se formará un margen. La altura del margen fusionado es el mayor de los dos márgenes que se fusionan.
Cuando un elemento aparece sobre otro, el margen inferior del primer elemento y el margen superior del segundo elemento se fusionarán. Vea la imagen siguiente:
Cuando un elemento está contenido dentro de otro (suponiendo que no haya márgenes internos o bordes que separen los márgenes externos), sus márgenes superior e inferior también se fusionarán. Vea la imagen siguiente:
Aunque puede parecer un poco extraño, los márgenes pueden incluso fusionarse con ellos mismos.
Supongamos que hay un elemento vacío, que tiene márgenes externos pero no tiene bordes o relleno. En este caso, los márgenes superior e inferior se tocarán entre sí y se fusionarán:
Si este margen se encuentra con el margen de otro elemento, también se producirá la fusión:
Esta es la razón por la que una serie de elementos de párrafo ocupan muy poco espacio, ya que todos sus márgenes se fusionan en un margen pequeño.
La fusión de márgenes puede parecer extraña a primera vista, pero en realidad tiene sentido. Tomemos como ejemplo una página de texto típica compuesta por varios párrafos. El espacio superior del primer párrafo es igual al margen superior del párrafo. Si no se produce la fusión de márgenes, la margen entre todos los párrafos posteriores será la suma de la margen superior y la margen inferior adyacente. Esto significa que el espacio entre los párrafos es el doble del espacio en la parte superior de la página. Si ocurre la fusión de márgenes, la margen superior y la margen inferior del párrafo se fusionan juntas, por lo que el espacio en todas partes es uniforme.
Notas:Sólo ocurre la fusión de márgenes verticales de los bloques en el flujo de documentos normales. Los márgenes entre los bloques en línea, los flotantes o los elementos de posicionamiento absoluto no se fusionan.
- Página anterior Márgen externo de CSS
- Página siguiente Resumen de posicionamiento de CSS
