Τι είναι η σύμπτυξη των περιθωρίων στο CSS;

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

Η συσσώρευση συμβαίνει στις ακόλουθες περιπτώσεις:

Μεταξύ γειτονικών στοιχείων: Τα κάθετα περιθώρια δύο γειτονικών στοιχείων συγχωνεύονται.
```
<p>Παράγραφος 1</p>
<p>Παράγραφος 2</p>
```
Αν τα <p> έχουν margin-bottom και margin-top αντίστοιχα, αυτά τα περιθώρια μπορούν να συγχωνευθούν.
Μεταξύ γονικού και του πρώτου/τελευταίου παιδιού: Αν ο γονέας δεν έχει border, padding, display: flex, display: grid, overflow: hidden ή άλλες ιδιότητες που δημιουργούν πλαίσιο μορφοποίησης, το πάνω περιθώριο του μπορεί να συγχωνευθεί με το margin-top του πρώτου παιδιού. Ομοίως, το κάτω περιθώριο του γονέα μπορεί να συγχωνευθεί με το margin-bottom του τελευταίου παιδιού.
```
<div class="parent">
  <p class="child">Παιδί</p>
</div>
```
Σε κενό στοιχείο: Αν ένα στοιχείο δεν έχει περιεχόμενο (height: 0, χωρίς border και padding), τα πάνω και κάτω περιθώρια του μπορούν να συγχωνευθούν.
```
<div class="empty"></div>
```

Ο πίνακας που απεικονίζει τα αποτελέσματα της συσσώρευσης:

Margin 1	Margin 2	Αποτέλεσμα συσσώρευσης
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Η συσσώρευση περιθωρίων συμβαίνει μόνο στην κάθετη κατεύθυνση (margin-top και margin-bottom). Τα οριζόντια περιθώρια (margin-left και margin-right) ποτέ δεν συσσωρεύονται.

Υπάρχουν τρόποι να αποτραπεί η συσσώρευση, όπως η προσθήκη border, padding, η χρήση display: flex, display: grid, overflow: hidden ή η δημιουργία νέου πλαισίου μορφοποίησης με display: flow-root.