Τι είναι η κατάρρευση των περιγραμμάτων στο CSS…

Το φαινόμενο της συρρίκνωσης περιθωρίων (margin collapsing) είναι ένα φαινόμενο στο CSS όπου τα κάθετα περιθώρια δύο ή περισσότερων διαδοχικών μπλοκ ενώνονται σε ένα μόνο περιθώριο. Το μέγεθος αυτού του κοινού περιθωρίου καθορίζεται από την μεγαλύτερη τιμή των συρρικνωμένων περιθωρίων.

Κύριοι κανόνες της συρρίκνωσης:

Συρρικνώνονται μόνο τα κάθετα περιθώρια (margin-top και margin-bottom). Τα οριζόντια δεν συρρικνώνονται.
Συρρικνώνονται μόνο τα περιθώρια γειτονικών στοιχείων αν δεν υπάρχει άλλο στοιχείο, padding, border ή περιεχόμενο μπλοκ ανάμεσά τους.
Το πάνω περιθώριο του πρώτου παιδιού θα συρρικνωθεί με το πάνω περιθώριο του γονέα του αν δεν υπάρχει padding, border ή άλλο περιεχόμενο ανάμεσά τους.
Το κάτω περιθώριο του τελευταίου παιδιού θα συρρικνωθεί με το κάτω περιθώριο του γονέα του αν δεν υπάρχει padding, border ή άλλο περιεχόμενο ανάμεσά τους.
Τα πάνω και κάτω περιθώρια ενός κενό στοιχείου μπορούν να συρρικνωθούν μεταξύ τους αν δεν έχει padding, border ή περιεχόμενο.
Αν ένα από τα συρρικνωμένα περιθώρια είναι αρνητικό, το τελικό μέγεθος είναι το άθροισμα των θετικών και αρνητικών τιμών (ή η απόλυτη τιμή αν και τα δύο είναι αρνητικά και το άθροισμα είναι μικρότερο από το μηδέν).

Παράδειγμα:

<div class="box1">Element 1</div>
<div class="box2">Element 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Σε αυτή την περίπτωση, η κάθετη απόσταση μεταξύ του box1 και του box2 θα είναι 30px (η μεγαλύτερη από τις 20px και 30px), όχι 50px.

Τρόποι αποτροπής της συρρίκνωσης:

Προσθέστε padding ή border ανάμεσα στα στοιχεία.
Δημιουργήστε ένα νέο μπλοκ μορφοποίησης (π.χ., με overflow: hidden, display: flow-root ή πλωτά στοιχεία).
Χρησιμοποιήστε display: inline-block, display: flex ή display: grid για τα στοιχεία.
Χρησιμοποιήστε απόλυτη τοποθέτηση.

Τι είναι η κατάρρευση των περιγραμμάτων στο CSS;