Às vezes, duas margens se transformam em uma única margem.
As margens superior e inferior dos elementos às vezes são recolhidas em um único margem que é igual à maior das duas margens.
Isso não acontece nas margens esquerda e direita! Somente margens superior e inferior!
Veja o exemplo a seguir:
Demonstração do colapso da margem:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Experimente você mesmo →
<!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>
No exemplo acima, o elemento <h1> tem uma margem inferior de 50px e o <h2> elemento tem uma margem superior definida como 20px.
O bom senso parece sugerir que a margem vertical entre o <h1> e o <h2> seria um total de 70px (50px + 20px). Mas devido ao colapso das margens, a margem real acaba sendo 50px.
Uma propriedade abreviada para definir todas as propriedades de margem em uma declaração
Define a margem inferior de um elemento
Define a margem esquerda de um elemento
Define a margem direita de um elemento
Define a margem superior de um elemento