Fusión de márgenes de CSS
- Página anterior Margen de CSS
- Página siguiente Margen interno de CSS
La fusión de márgenes externos se refiere a que cuando dos márgenes verticales se encuentran, se forman un margen.
La altura del margen fusionado es el mayor de las alturas de los 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 forman un margen. La altura del margen fusionado es el mayor de las alturas de los 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 (supongamos que no hay márgenes internos o bordes que separen los márgenes externos), sus márgenes superiores y / o inferiores también se fusionarán. Vea la imagen siguiente:
A pesar de que parece extraño, los márgenes externos pueden incluso fusionarse con sí mismos.
Supongamos que hay un elemento vacío que tiene margen externo, pero no tiene borde o relleno. En este caso, el margen superior y el margen inferior se encontrarán juntos, produciendo la fusión:
Si este margen externo se encuentra con el margen externo de otro elemento, también se producirá la fusión:
Esta es la razón por la que los elementos de párrafo ocupan muy poco espacio, ya que todos sus márgenes externos se fusionan en un solo margen pequeño.
La fusión de márgenes externos 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, el margen entre todos los párrafos posteriores será la suma del margen superior y el margen inferior adyacentes. Esto significa que el espacio entre los párrafos es el doble de la parte superior de la página. Si ocurre la fusión de márgenes, el margen superior y el margen inferior entre los párrafos se fusionarán juntos, haciendo que las distancias sean consistentes en todas partes.
Notas:Sólo se producirá la fusión de márgenes externos en los bloques de flotación de documentos comunes. Los márgenes externos entre los elementos en línea, flotantes o de posición absoluta no se fusionarán.
Todas las propiedades de margen externo de CSS
| Atributo | Descripción |
|---|---|
| margin | Usado para establecer propiedades de margen en una declaración. |
| margin-bottom | Establecer el margen inferior externo del elemento. |
| margin-left | Establecer el margen izquierdo externo del elemento. |
| margin-right | Establecer el margen derecho externo del elemento. |
| margin-top | Establecer el margen superior externo del elemento. |
- Página anterior Margen de CSS
- Página siguiente Margen interno de CSS
