Πλαίσιο κουτί: Συγχώνευση εξωτερικών περιθωρίων του CSS

Η συγχώνευση των εξωτερικών περιθωρίων σημαίνει ότι όταν δύο κάθετοι εξωτερικοί περιθώρια συναντώνται, δημιουργούν ένα εξωτερικό περιθώριο.

Το ύψος του συγχωνευμένου εξωτερικού περιθωρίου είναι ίσο με το μεγαλύτερο από τα ύψη των δύο συγχωνευόμενων εξωτερικών περιθωρίων.

Συγχώνευση εξωτερικών περιθωρίων

Η συγχώνευση των εξωτερικών περιθωρίων (προσθήκη) είναι μια σχετικά απλή έννοια. Ωστόσο, στην πρακτική διάταξη ιστοσελίδων, μπορεί να προκαλέσει πολλές αποφάσεις.

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

Όταν ένα στοιχείο εμφανίζεται πάνω από ένα άλλο στοιχείο, το κάτω εξωτερικό περιθώριο του πρώτου στοιχείου και το επάνω εξωτερικό περιθώριο του δεύτερου στοιχείου συγχωνεύονται. Δείτε την εικόνα:

Παράδειγμα συγχώνευσης περιθωρίων CSS 1

Προσπαθήστε το شخصικά

Όταν ένα στοιχείο περιλαμβάνεται σε ένα άλλο στοιχείο (υποθέτοντας ότι δεν υπάρχουν εσωτερικά περιθώρια ή πλαίσια που να διαιρούν τα εξωτερικά περιθώρια), τα επάνω και/ή τα κάτω εξωτερικά περιθώρια τους συγχωνεύονται. Δείτε την εικόνα:

Παράδειγμα συγχώνευσης περιθωρίων CSS 2

Προσπαθήστε το شخصικά

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

Εκτίθεται ότι υπάρχει ένας κενός στοιχείο, το οποίο έχει εξωτερικό περιθώριο αλλά δεν έχει πλαίσιο ή γεμίσματα. Σε αυτή την περίπτωση, το επάνω εξωτερικό περιθώριο και το κάτω εξωτερικό περιθώριο συναντώνται και συγχωνεύονται:

Παράδειγμα συγχώνευσης περιθωρίων CSS 3

Αν αυτό το περιθώριο συναντήσει το περιθώριο ενός άλλου στοιχείου, θα συμβεί επίσης η συγχώνευση:

Παράδειγμα συγχώνευσης περιθωρίων CSS 4

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

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

Η πραγματική σημασία της συγχώνευσης περιθωρίων CSS

Σημείωση:Μόνο η οριζόντια απόσταση των περιθωρίων των κουτιών στο κανονικό ροή του έγγραφου θα συγχωνευτεί. Τα περιθώρια των κουτιών που είναι γραμμένα, που κολυμπάνε ή που χρησιμοποιούν την απόλυτη τοποθέτηση δεν θα συγχωνευτούν.