A veces dos márgenes colapsan en uno solo.
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:
Demostración del colapso del margen:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
En el ejemplo anterior, el elemento <h1> tiene un margen inferior de 50px y el <h2> El elemento tiene un margen superior establecido en 20px.
El sentido común parecería sugerir que el margen vertical entre <h1> y el <h2> sería un total de 70px (50px + 20px). Pero debido al colapso de los márgenes, el margen real termina siendo de 50 px.
Una propiedad abreviada para establecer todas las propiedades de margen en una declaración
Establece el margen inferior de un elemento.
Establece el margen izquierdo de un elemento.
Establece el margen derecho de un elemento.
Establece el margen superior de un elemento.