Table of contents
A veces dos márgenes colapsan en un solo margen.
Margen colapsado
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:
Demo de un margen colapsado:
En el ejemplo anterior, el elemento <h1> tiene un margen inferior de 50px y el elemento <h2> tiene un margen superior establecido en 20px.
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 50px.
Todas las propiedades de margen CSS
| Propiedad | Descripción |
margin | Una propiedad abreviada para establecer todas las propiedades de margen en una declaración. |
margin-bottom | Establece el margen inferior de un elemento. |
margin-left | Establece el margen izquierdo de un elemento. |
margin-right | Establece el margen derecho de un elemento. |
margin-top | Establece el margen superior de un elemento. |
Resumen
Los márgenes superiores e inferiores de los elementos a veces se contraen en un solo margen que es igual al mayor de los dos márgenes. Solo sucede en los márgenes superior e inferior. Hay cuatro propiedades de margen CSS: margin, margin-bottom, margin-left y margin-top.
Traducido con 💚 desde W3Schools.com