Η marginιδιότητα καθορίζει το εξώτατο τμήμα του μοντέλου κουτιού, δημιουργώντας χώρο γύρω από ένα στοιχείο, έξω από οποιοδήποτε καθορισμένο περίγραμμα.
Τα περιθώρια ορίζονται χρησιμοποιώντας μήκη, ποσοστά ή τη λέξη-κλειδί autoκαι μπορεί να έχουν αρνητικές τιμές. Ακολουθεί ένα παράδειγμα:
.box ( margin: 0 3em 0 3em; )margin είναι μια στενή ιδιότητα και δέχεται έως και τέσσερις τιμές, που εμφανίζονται εδώ:
.box ( margin: || || || )Εάν έχουν οριστεί λιγότερες από τέσσερις τιμές, οι τιμές που λείπουν υπολογίζονται με βάση αυτές που έχουν οριστεί. Για παράδειγμα, τα ακόλουθα δύο σύνολα κανόνων θα έχουν ίδια αποτελέσματα:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Έτσι, εάν ορίζεται μόνο μία τιμή, αυτό θέτει και τα τέσσερα περιθώρια στην ίδια τιμή. Εάν δηλωθούν τρεις τιμές, είναι margin: (top) (left-and-right) (bottom);.
Οποιοδήποτε από τα μεμονωμένα περιθώρια μπορεί να δηλωθεί χρησιμοποιώντας longhand, οπότε θα ορίσετε μόνο μία τιμή ανά ιδιότητα:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto και κεντράρισμα
Κάθε μία από τις ιδιότητες περιθωρίου μπορεί επίσης να δεχτεί μια τιμή auto. Μια τιμή autoβασικά λέει στο πρόγραμμα περιήγησης να καθορίσει το περιθώριο για εσάς. Στις περισσότερες περιπτώσεις, μια τιμή autoθα είναι ισοδύναμη με μια τιμή 0(η οποία είναι η αρχική τιμή για κάθε ιδιότητα περιθωρίου) ή αλλιώς όποιος χώρος είναι διαθέσιμος σε αυτήν την πλευρά του στοιχείου. Ωστόσο, autoείναι βολικό για οριζόντιο κεντράρισμα:
.container ( width: 980px; margin: 0 auto; )Σε αυτό το παράδειγμα, δύο πράγματα γίνονται για να κεντράρετε αυτό το στοιχείο οριζόντια εντός του διαθέσιμου χώρου:
- Στο στοιχείο έχει καθορισμένο πλάτος
- Τα αριστερά και δεξιά περιθώρια έχουν οριστεί σε
auto
Χωρίς το καθορισμένο πλάτος, οι autoτιμές ουσιαστικά δεν θα είχαν καμία επίδραση, θέτοντας το αριστερό και το δεξί περιθώριο 0ή σε οποιοδήποτε άλλο διαθέσιμο χώρο μέσα στο γονικό στοιχείο.
Θα πρέπει επίσης να επισημανθεί ότι autoείναι χρήσιμο μόνο για οριζόντιο κεντράρισμα, και επομένως η χρήση autoγια περιθώρια πάνω και κάτω δεν θα κεντράρει ένα στοιχείο κάθετα, το οποίο μπορεί να προκαλέσει σύγχυση στους αρχάριους.
Σύμπτυξη περιθωρίων
Τα κάθετα περιθώρια σε διαφορετικά στοιχεία που αγγίζουν το ένα το άλλο (επομένως δεν έχουν περιεχόμενο, παραγέμισμα ή περιγράμματα που τα χωρίζουν) θα καταρρεύσουν, σχηματίζοντας ένα μόνο περιθώριο ίσο με το μεγαλύτερο από τα παρακείμενα περιθώρια. Αυτό δεν συμβαίνει σε οριζόντια περιθώρια (αριστερά και δεξιά), μόνο κατακόρυφα (πάνω και κάτω).
Για παράδειγμα, ακολουθήστε την ακόλουθη HTML:
Collapsing Margins
Example text.Και το ακόλουθο CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Σε αυτό το παράδειγμα, το h2στοιχείο έχει ένα κάτω περιθώριο 20px. Το στοιχείο παραγράφου, το οποίο αμέσως ακολουθεί στην πηγή, έχει ένα ανώτερο περιθώριο που ορίζεται στα 10px.
Η κοινή λογική φαίνεται να υποδηλώνει ότι το κατακόρυφο πάχος περιθωρίου μεταξύ h2και της παραγράφου θα είναι συνολικά 30px (20px + 10px). Αλλά λόγω της κατάρρευσης του περιθωρίου, το πραγματικό πάχος καταλήγει στα 20px. Αυτό φαίνεται στο ενσωματωμένο στυλό παρακάτω:
Παρόλο που τα καταρρέοντα περιθώρια μπορεί να φαίνονται ακατάλληλα με την πρώτη ματιά, είναι πραγματικά χρήσιμα για μερικούς λόγους. Πρώτον, εμποδίζουν τα κενά στοιχεία να προσθέσουν επιπλέον, συνήθως ανεπιθύμητο, κάθετο χώρο περιθωρίου.
Δεύτερον, επιτρέπουν μια πιο συνεπή προσέγγιση για τη δήλωση καθολικών περιθωρίων μεταξύ των στοιχείων της σελίδας. Για παράδειγμα, οι επικεφαλίδες έχουν συνήθως χώρο κάθετου περιθωρίου, όπως και οι παράγραφοι. Εάν τα περιθώρια δεν καταρρέουν, οι επικεφαλίδες που ακολουθούν τις παραγράφους (ή το αντίστροφο) συχνά απαιτούν επαναφορά των περιθωρίων σε ένα από τα στοιχεία προκειμένου να επιτευχθεί σταθερή ποσότητα κάθετης απόστασης.
Τρίτον, η κατάρρευση περιθωρίου ισχύει και για ένθετα στοιχεία. Κοιτάξτε την ακόλουθη πένα:
Εδώ, το στοιχείο παραγράφου έχει ένα ανώτερο περιθώριο που ορίζεται στα 30 εικονοστοιχεία και βρίσκεται μέσα σε ένα divστοιχείο με ανώτερο περιθώριο 40 εικονοστοιχείων . Επιπλέον, το h2στοιχείο έχει κάτω περιθώριο 20 εικονοστοιχείων.
Και πάλι, η κοινή λογική υποδηλώνει ότι ο συνολικός χώρος κάθετου περιθωρίου θα είναι 90px (20px + 40px + 30px), αλλά αντ 'αυτού τα περιθώρια καταρρέουν σε ένα μόνο περιθώριο 40px (το υψηλότερο από τα τρία). Αυτό είναι χρήσιμο στις περισσότερες περιπτώσεις, καθώς δεν χρειάζεται να επαναπροσδιορίσετε κανένα από τα κορυφαία περιθώρια για να αφαιρέσετε τον επιπλέον κατακόρυφο χώρο.
Αρνητικά περιθώρια
Όπως ίσως υποψιάζεστε, ενώ μια θετική τιμή περιθωρίου απομακρύνει άλλα στοιχεία, ένα αρνητικό περιθώριο είτε θα τραβήξει το ίδιο το στοιχείο προς αυτήν την κατεύθυνση, είτε θα τραβήξει άλλα στοιχεία προς αυτό.
Ακολουθεί ένα παράδειγμα δοχείου με επένδυση και η κεφαλίδα h2 έχει αρνητικά περιθώρια που τραβά τον εαυτό της μέσω αυτής της επένδυσης πίσω στις άκρες:
Ανατρέξτε στην
Περίπτωση συνηθέστερης χρήσης της πένας για αρνητικά περιθώρια από τον Chris Coyier (@chriscoyier)
στο CodePen.
Ακολουθεί ένα παράδειγμα όπου η πρώτη παράγραφος έχει αρνητικό κατώτατο περιθώριο, το οποίο τραβάει την επόμενη παράγραφο.
Δείτε το Pen
Negative Margin τραβώντας την κάτω παράγραφο του Chris Coyier (@chriscoyier)
στο CodePen.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Εργα | Εργα | Εργα | Εργα | Εργα | Εργα | Εργα |
Το IE6 είναι επιρρεπές στο διπλασιασμένο σφάλμα float-margin, το οποίο μπορεί να επιλυθεί στις περισσότερες περιπτώσεις με την προσθήκη display: inlineστο κινούμενο στοιχείο.