Μερικές φορές δύο περιθώρια συμπίπτουν σε ένα μόνο περιθώριο.
Τα επάνω και κάτω περιθώρια των στοιχείων μερικές φορές συμπτύσσονται σε ένα ενιαίο περιθώριο που είναι ίσο με το μεγαλύτερο από τα δύο περιθώρια.
Αυτό δεν συμβαίνει στο αριστερό και το δεξί περιθώριο! Μόνο πάνω και κάτω περιθώρια!
Δείτε το παρακάτω παράδειγμα:
Επίδειξη κατάρρευσης περιθωρίου:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Δοκιμάστε το μόνοι σας →
<!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>
Στο παραπάνω παράδειγμα, το στοιχείο <h1> έχει κάτω περιθώριο 50 px και το <h2> Το στοιχείο έχει ένα επάνω περιθώριο που έχει οριστεί στα 20 px.
Η κοινή λογική φαίνεται να υποδηλώνει ότι το κατακόρυφο περιθώριο μεταξύ του <h1> και το <h2> θα ήταν συνολικά 70px (50px + 20px). Αλλά λόγω της κατάρρευσης του περιθωρίου, το πραγματικό περιθώριο καταλήγει να είναι 50 px.
Μια συντομογραφία για τον ορισμό όλων των ιδιοτήτων περιθωρίου σε μία δήλωση
Ορίζει το κάτω περιθώριο ενός στοιχείου
Ορίζει το αριστερό περιθώριο ενός στοιχείου
Ορίζει το δεξί περιθώριο ενός στοιχείου
Ορίζει το επάνω περιθώριο ενός στοιχείου