Μοντέλο κουτί: Περιθώρια CSS
Η περιοχή κενού γύρω από το περίγραμμα του στοιχείου είναι τα περιθώρια. Η ρύθμιση των περιθωρίων δημιουργεί επιπλέον "κενό" έξω από το στοιχείο.
Ο απλούστερος τρόπος ρύθμισης των περιθωρίων είναι η χρήση της ιδιότητας margin, η οποία αποδέχεται οποιαδήποτε μονάδα μήκους, ποσοστιαίες τιμές ακόμα και αρνητικές τιμές.
CSS margin 属性
Ο απλούστερος τρόπος ρύθμισης των περιθωρίων είναι η χρήση Η ιδιότητα margin.
Η ιδιότητα margin αποδέχεται οποιαδήποτε μονάδα μήκους, μπορεί να είναι pixel, inch, millimeter ή em.
Τα περιθώρια μπορούν να ρυθμιστούν ως auto. Μια πιο συχνή πρακτική είναι να οριστούν μήκη για τα περιθώρια. Η παρακάτω διατύπωση ορίζει περιθώρια 1/4 ίντσας για κάθε πλευρά του στοιχείου h1:
h1 {μαρτύριος : 0.25in;}
Το παρακάτω παράδειγμα ορίζει διαφορετικούς περιθώρια για τις τέσσερις πλευρές του στοιχείου h1, χρησιμοποιώντας μονάδες μήκους σε pixel (px):
h1 {μαρτύριος : 10px 0px 15px 5px;}
Με τον ίδιο τρόπο που καθορίζονται τα περιθώρια, η σειρά των τιμών ξεκινά από το επάνω περιθώριο (top) και περιφέρεται γύρω από το στοιχείο κατά σειρά:
παράθυρο: επάνω δεξιά κάτω αριστερά
Επιπλέον, μπορείτε να καθορίσετε έναν ποσοστό για το margin:
p {παράθυρο: 10%;}
Οι ποσοστά είναι υπολογισμένα ως ποσοστό του width του γονικού στοιχείου. Στο παρακάτω παράδειγμα, το περιθώριο που καθορίζεται για το στοιχείο p είναι 10% του width του γονικού στοιχείου.
Η προεπιλεγμένη τιμή του margin είναι 0, οπότε αν δεν καθοριστεί μια τιμή για το margin, δεν θα εμφανιστεί το περιθώριο. Ωστόσο, στην πρακτική, οι περιηγητές παρέχουν προκαθορισμένα στυλ για πολλούς στοιχεία, και τα περιθώρια δεν είναι εξαιρέσεις. Για παράδειγμα, σε περιηγητές που υποστηρίζουν το CSS, τα περιθώρια δημιουργούν ένα 'κενό' πάνω και κάτω από κάθε στοιχείο παράγραφο. Επομένως, αν δεν καθοριστεί το περιθώριο για το στοιχείο p, ο περιηγητής μπορεί να εφαρμόσει αυτόματα ένα περιθώριο. Φυσικά, μπορείτε να αντικαταστήσετε το προεπιλεγμένο στυλ αν το δηλώσετε ειδικά.
Αντιγραφή τιμών
Μπορείτε να θυμάστε; Συζητήσαμε τα προηγούμενα δύο κεφάλαια για την αντιγραφή τιμών. Ας σας εξηγήσουμε πώς να χρησιμοποιήσετε την αντιγραφή τιμών.
Ορισμένες φορές, εισάγουμε τιμές που επαναλαμβάνονται:
p {παράθυρο: 0.5εμ 1εμ 0.5εμ 1εμ;}
Με την αντιγραφή τιμών, δεν χρειάζεται να πληκτρολογήσετε αυτό το ζευγάρι αριθμών ξανά. Οι παρακάτω κανόνες είναι ισούται με τους παρακάτω κανόνες:
p {παράθυρο: 0.5εμ 1εμ;}
Αυτές οι δύο τιμές μπορούν να αντικαταστήσουν τις προηγούμενες 4 τιμές. Πώς γίνεται αυτό; Το CSS ορίζει ορισμένες κανόνες που επιτρέπουν την καθοδήγηση των περιθωρίων με λιγότερες από 4 τιμές. Οι κανόνες είναι οι εξής:
- Αν λείπει η τιμή του αριστερού περιθωρίου, θα χρησιμοποιηθεί η τιμή του δεξιού περιθωρίου.
- Αν λείπει η τιμή του κάτω περιθωρίου, θα χρησιμοποιηθεί η τιμή του επάνω περιθωρίου.
- Αν λείπει η τιμή του δεξιού περιθωρίου, θα χρησιμοποιηθεί η τιμή του επάνω περιθωρίου.
Η παρακάτω εικόνα παρέχει έναν πιο εμφανή τρόπο για να κατανοήσουμε αυτό:
Αντίθετα, αν καθοριστούν 3 τιμές για τα περιθώρια, η 4η τιμή (δηλαδή το αριστερό περιθώριο) θα αντιγράψει από την 2η τιμή (το δεξί περιθώριο). Αν δοθούν 2 τιμές, η 4η τιμή θα αντιγράψει από την 2η τιμή, η 3η τιμή (το κάτω περιθώριο) θα αντιγράψει από την 1η τιμή (το επάνω περιθώριο). Στη τελευταία περίπτωση, αν δοθεί μόνο μια τιμή, τα άλλα 3 περιθώρια θα αντιγράψουν αυτήν την τιμή (το επάνω περιθώριο).
Χρησιμοποιώντας αυτό το απλό μηχανισμό, χρειάζεται μόνο να καθορίσετε τις απαραίτητες τιμές, χωρίς να εφαρμόσετε όλες τις 4 τιμές, π.χ.:
h1 {παράθυρο: 0.25εμ 1εμ 0.5εμ;} /* ισούται με 0.25εμ 1εμ 0.5εμ 1εμ */
h2 {παράθυρο: 0.5εμ 1εμ;} /* ισούται με 0.5εμ 1εμ 0.5εμ 1εμ */
p {margin: 1px;} /* ισούται με 1px 1px 1px 1px */
Αυτός ο τρόπος έχει μια μικρή μειονεκτικότητα, θα αντιμετωπίσετε αυτό το πρόβλημα στο τέλος. Ας υποθέσουμε ότι θέλετε να ρυθμίσετε το περιθώριο της κορυφής και της αριστεράς του στοιχείου p ως 20 pixel, το περιθώριο της κάτω γωνίας και της δεξιάς γωνίας ως 30 pixel. Σε αυτή την περίπτωση, πρέπει να γράψετε:
p {margin: 20px 30px 30px 20px;}
Έτσι μπορείτε να επιτύχετε το επιθυμητό αποτέλεσμα. Η惜ποτεία είναι ότι δεν υπάρχει τρόπος να μειώσουμε τον αριθμό των τιμών που χρειάζονται.
Ας δούμε έναν άλλο παράδειγμα. Αν θέλετε να ρυθμίσετε όλα τα περιθώρια εκτός από το αριστερό ως auto (το αριστερό είναι 20px):
p {margin: auto auto auto 20px;}
Ταυτόχρονα, έτσι μπορείτε να επιτύχετε το επιθυμητό αποτέλεσμα. Το πρόβλημα είναι ότι η πληκτρολόγηση αυτών των auto είναι περίπλοκη. Αν θέλετε να ελέγξετε το περιθώριο μιας πλευράς του στοιχείου, χρησιμοποιήστε τις μονομερείς περιθωριακές ιδιότητες.
Μονομερείς περιθωριακές ιδιότητες
Μπορείτε να χρησιμοποιήσετε μονομερείς περιθωριακές ιδιότητες για να ρυθμίσετε το περιθώριο μιας πλευράς του στοιχείου. Ας υποθέσουμε ότι θέλετε να ρυθμίσετε το περιθώριο της αριστεράς του στοιχείου p ως 20px. Δεν χρειάζεται να χρησιμοποιήσετε margin (πρέπει να πληκτρολογήσετε πολλά auto), αλλά μπορείτε να χρησιμοποιήσετε τον παρακάτω τρόπο:
p {margin-left: 20px;}
Μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις εξής ιδιότητες για να ρυθμίσετε το περιθώριο της αντίστοιχης πλευράς χωρίς να επηρεάσει τα άλλα περιθώρια:
Μπορείτε να χρησιμοποιήσετε πολλαπλές αυτές τις μονομερείς ιδιότητες σε μια規μπλα, π.χ.:
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
Φυσικά, για αυτή την κατάσταση, η χρήση του margin μπορεί να είναι πιο εύκολη:
p {margin: 20px 30px 30px 20px;}
Είτε χρησιμοποιείτε μονομερείς ιδιότητες είτε χρησιμοποιείτε margin, το αποτέλεσμα είναι το ίδιο. Γενικά, αν θέλετε να ρυθμίσετε το περιθώριο πολλαπλών πλευρών, η χρήση του margin είναι πιο εύκολη. Ωστόσο, από την άποψη της εμφάνισης του έγγραφου, δεν έχει σημασία ποιον τρόπο χρησιμοποιείτε, οπότε πρέπει να επιλέξετε τον τρόπο που είναι πιο εύκολος για εσάς.
Σημειώσεις και σχόλια
Σημείωση:Το Netscape και το IE ορίζουν την προεπιλεγμένη τιμή του περιθωρίου (margin) για το ετικέτα body ως 8px. Το Opera δεν είναι έτσι. Αντίθετα, το Opera ορίζει την προεπιλεγμένη τιμή του εσωτερικού γεμίσματος (padding) ως 8px, οπότε αν θέλετε να προσαρμόσετε τα όρια του ολόκληρου του ιστοσελίδας και να τα εμφανίσετε σωστά στο Opera, πρέπει να προσαρμόσετε το padding του body.
Παράδειγμα εξωτερικού περιθωρίου CSS:
- 设置 κείμενο της αριστεράς εξωτερικής περιθωρίου
- 本例演示如何设置文本的左外边距。
- 设置文本的右外边距
- 本例演示如何设置文本的右外边距。
- 设置文本的上外边距
- 本例演示如何设置文本的上外边距。
- 设置文本的下外边距
- 本例演示如何设置文本的下外边距。
- 所有的外边距属性在一个声明中。
- 本例演示如何将所有的外边距属性设置于一个声明中。
CSS 外边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
