Colapsarea marginilor în CSS (Margin Collapse)
Uneori, marginile de sus și de jos ale elementelor se unesc: în loc să se adune, cele două devin o singură margine, la fel de mare ca cea mai mare dintre ele. Acest lucru se numește colapsarea marginilor.
Notă: Marginile din stânga și din dreapta nu colapsează niciodată; colapsează doar marginile de sus și de jos.
Să luăm un <h1> cu o margine de jos de 50px, urmat de un <h2> cu o margine de sus de 20px. Te-ai putea aștepta la 70px între ele, dar colapsarea marginilor lasă 50px, valoarea mai mare.
Titluri
O margine de sus de 20px întâlnește o margine de jos de 50px, iar spațiul rezultat este de 50px.
<style>, dă <h1> un margin-bottom de 50px și <h2> un margin-top de 20px. Adaugă un h1 urmat de un h2. Spațiul dintre ele se restrânge la 50px, nu la 70px.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
margin-bottom: 50px;
}
h2 {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>The gap between the headings collapses to 50px, the larger of the two margins.</p>
</body>
</html>
Paragrafe
Cu margini de sus și de jos de 30px la fiecare paragraf, obții între ele un spațiu de 30px în loc de 60px, datorită colapsării.
<style>, dă fiecărui <p> un margin-top de 30px și un margin-bottom de 30px. Adaugă două paragrafe. Spațiul dintre ele se restrânge la 30px, nu la 60px.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin-top: 30px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>Second paragraph. The gap between the two paragraphs collapses to 30px, not 60px.</p>
</body>
</html>
Toate proprietățile CSS pentru margin
Proprietățile margin, pe scurt:
margin— o singură declarație pentru toate marginile.margin-bottom— marginea de jos.margin-left— marginea din stânga.margin-right— marginea din dreapta.margin-top— marginea de sus.