Colapso de margen CSS
A veces dos márgenes colapsan en un solo margen.
Colapso de margen
Los márgenes superior e inferior de los elementos a veces se contraen en un solo margen que es igual al mayor de los dos márgenes.
¡Esto no sucede en los márgenes izquierdo y derecho! ¡Solo márgenes superior e inferior!
Mira el siguiente ejemplo:
Ejemplo
Demostración del colapso del margen:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
En el ejemplo anterior, el elemento <h1> tiene un margen inferior de 50 px y el elemento <h2> tiene un margen superior establecido en 20 px.
El sentido común parecería sugerir que el margen vertical entre <h1> y <h2> sería un total de 70px (50px + 20px). Pero debido al colapso del margen, el margen real termina siendo 50 px.
Todas las propiedades de margen CSS
| Property | Description |
|---|---|
| margin | A shorthand property for setting the margin properties in one declaration |
| margin-bottom | Sets the bottom margin of an element |
| margin-left | Sets the left margin of an element |
| margin-right | Sets the right margin of an element |
| margin-top | Sets the top margin of an element |