Néha két margó egyetlen margóvá omlik össze.
Az elemek felső és alsó margója néha egybe van összecsukva margó, amely egyenlő a két margó közül a legnagyobbkal.
Ez nem történik meg a bal és a jobb margón! Csak felső és alsó margó!
Nézze meg a következő példát:
A margó összeomlásának bemutatása:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Próbálja ki Ön is →
<!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>
A fenti példában a <h1> elem alsó margója 50 képpont, és a <h2> elem felső margója 20 képpont.
A józan ész azt sugallja, hogy a függőleges margó a <h1> között és a <h2> összesen 70 képpont (50 képpont + 20 képpont) lenne. De az árrés összeomlása miatt, a tényleges margó végül 50 képpont lesz.
Egy gyorsított tulajdonság az összes margó tulajdonság beállításához egy deklarációban
Beállítja egy elem alsó margóját
Beállítja egy elem bal margóját
Beállítja egy elem jobb margóját
Beállítja egy elem felső margóját