COLAPSO DA MARGEM CSS
o elemento h1 tem uma margem inferior de 70px
e o elemento h2 tem uma margem superior de 10px. Portanto, a margem
vertical entre h1 e h2 deveria ser de 80px (70px + 10px). No entanto,
devido ao colapso da margem, a margem real acaba sendo 70px.
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 70px 0;
}
h2 {
margin:10px 0 0 0;
}
</style>
</head>
<body>
<p>o elemento h1 tem uma margem inferior de 70px e o elemento h2
tem uma margem superior de 10px. Portanto, a margem vertical entre h1 e h2
deveria ser de 800px (70px + 10px). No entanto, devido ao colapso da margem, a
margem real acaba sendo 50px.</p>
<h1>Título 1</h1>
<h2>Título 2</h2>
</body>
</html>