Τι είναι η σύγκλιση περιθωρίων και ποιος είναι ο…

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

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

Διαδοχικά στοιχεία: Το margin-bottom του πάνω στοιχείου και το margin-top του επόμενου.
Γονέας και πρώτο/τελευταίο παιδί: Το margin-top του γονέα και το margin-top του πρώτου παιδιού; το margin-bottom του γονέα και το margin-bottom του τελευταίου παιδιού. Συμβαίνει αν μεταξύ τους δεν υπάρχουν όρια (border), padding, inline περιεχόμενο ή αν ο γονέας δεν είναι flex/grid container.
Άδειες μπλοκ: Το margin-top του στοιχείου και το margin-bottom του, αν δεν έχει περιεχόμενο, όρια ή padding.

Παράδειγμα διαδοχικών στοιχείων:

<div style="margin-bottom: 20px;">Στοιχείο 1</div>
<div style="margin-top: 30px;">Στοιχείο 2</div>

Σε αυτή την περίπτωση, η απόσταση μεταξύ των στοιχείων θα είναι 30px, όχι 50px.

Παράδειγμα γονέα και πρώτου παιδιού:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Παιδί</div>
</div>

Η απόσταση από την άνω άκρη του γονέα μέχρι το περιεχόμενό του θα είναι 40px.

Για ποιο λόγο χρησιμοποιείται:

Ο μηχανισμός συσσώρευσης περιθωρίων βοηθά στη διατήρηση προβλέψιμων κάθετων αποστάσεων μεταξύ μπλοκ στο φυσιολογικό ρεύμα του εγγράφου, αποτρέποντας περιττούς χώρους. Απλοποιεί τη δημιουργία συνεπούς τυπογραφικής κάθετης ρυθμικής, καθώς οι σχεδιαστές μπορούν να ορίσουν περιθώρια για παραγράφους ή επικεφαλίδες ανεξάρτητα, και ο περιηγητής θα φροντίσει για τη σωστή συγχώνευση των χώρων.

Πώς να το αποτρέψετε:

Προσθέτοντας όριο (border) μεταξύ στοιχείων ή μεταξύ γονέα και παιδιού.
Προσθέτοντας padding (padding) μεταξύ στοιχείων ή μεταξύ γονέα και παιδιού.
Χρησιμοποιώντας την ιδιότητα overflow με τιμή διαφορετική από visible στον γονέα.
Κάνοντας το στοιχείο float (float).
Χρησιμοποιώντας την τοποθέτηση absolute ή fixed.
Μετατρέποντας τα στοιχεία σε πλαίσιο διαμόρφωσης Flexbox ή Grid (γονικό στοιχείο).
Μετατρέποντας το στοιχείο σε inline-block.

/* Πρόληψη για γονέα και παιδί */
.parent {
  border-top: 1px solid transparent; /* ή padding-top */
}

/* Πρόληψη για διαδοχικά στοιχεία */
.element + .element {
  margin-top: 0; /* ή border-top */
}

Τι είναι η σύγκλιση περιθωρίων και ποιος είναι ο σκοπός της;