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

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

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

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

Υπάρχουν οι ακόλουθες ιδιότητες για να ορίσετε περιθώριο ή padding σε CSS σε κάθε πλευρά ενός στοιχείου:

Υλικό παραγεμίσματος:

• padding-top: έννοια;
• padding-right: έννοια;
• padding-bottom: έννοια;
• padding-αριστερά: έννοια;

Πεδία:

• margin-top: έννοια;
• περιθώριο-δεξιά: έννοια;
• περιθώριο-κάτω: έννοια;
• περιθώριο-αριστερά: έννοια;

Οι τιμές μπορούν να καθοριστούν σε οποιεσδήποτε μονάδες CSS - px, em, %, κ.λπ. Παράδειγμα: margin-top: 15px .

Υπάρχει επίσης ένα πολύ βολικό πράγμα όπως συντομογραφία για περιθώριο και συμπλήρωμα CSS. Εάν χρειάζεται να ορίσετε περιθώρια ή γέμιση και στις τέσσερις πλευρές ενός στοιχείου, δεν χρειάζεται να γράψετε την ιδιότητα για κάθε πλευρά ξεχωριστά. Όλα γίνονται πιο απλά: για το περιθώριο και το padding μπορείτε να καθορίσετε 1, 2, 3 ή 4 τιμές ταυτόχρονα. Ο αριθμός των τιμών καθορίζει τον τρόπο κατανομής των ρυθμίσεων:

• 4 τιμές: το padding ορίζεται για όλες τις πλευρές του στοιχείου με την ακόλουθη σειρά: επάνω, δεξιά, κάτω, αριστερά: padding: 2px 4px 5px 10px;
• 3 τιμές: το padding ρυθμίζεται πρώτα για την επάνω πλευρά, μετά ταυτόχρονα για την αριστερή και τη δεξιά και μετά για την κάτω: padding: 3px 6px 9px;
• 2 τιμές: το padding ρυθμίζεται πρώτα ταυτόχρονα από την επάνω και την κάτω πλευρά και, στη συνέχεια, ταυτόχρονα για την αριστερή και τη δεξιά: padding: 6px 12px;
• 1 τιμή: ίση πλήρωση έχει οριστεί για όλες τις πλευρές του στοιχείου: padding: 3px;

Οι ίδιοι κανόνες ισχύουν για την ιδιότητα περιθωρίου CSS. Λάβετε υπόψη ότι μπορείτε επίσης να χρησιμοποιήσετε αρνητικές τιμές για το περιθώριο (για παράδειγμα, -3px), οι οποίες μερικές φορές μπορεί να είναι αρκετά χρήσιμες.

Περιθώριο σύμπτυξης

Φανταστείτε την κατάσταση: δύο στοιχεία μπλοκ βρίσκονται το ένα πάνω στο άλλο και τους δίνονται πεδία περιθωρίου. Το επάνω μπλοκ έχει οριστεί σε περιθώριο: 60 εικονοστοιχεία και το κάτω μπλοκ ορίζεται σε περιθώριο: 30 εικονοστοιχεία. Θα ήταν λογικό να υποθέσουμε ότι τα δύο οριοθετημένα πεδία δύο στοιχείων απλώς θα αγγίξουν και, ως αποτέλεσμα, το κενό μεταξύ των μπλοκ θα είναι ίσο με 90 pixel.

Ωστόσο, τα πράγματα είναι διαφορετικά. Στην πραγματικότητα, σε μια τέτοια κατάσταση, εμφανίζεται ένα φαινόμενο που ονομάζεται κατάρρευση, όταν επιλέγεται το μεγαλύτερο σε μέγεθος από δύο παρακείμενα πεδία στοιχείων. Στο παράδειγμά μας, το τελικό κενό μεταξύ των στοιχείων θα είναι 60 pixel.

Η απόσταση μεταξύ των μπλοκ είναι ίση με τη μεγαλύτερη από τις τιμές

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

• Όταν και οι δύο τιμές περιθωρίου είναι θετικές, το μέγεθος του περιθωρίου που προκύπτει θα είναι ίσο με τη μεγαλύτερη τιμή.
• Εάν μία από τις τιμές είναι αρνητική, τότε για να υπολογίσετε το μέγεθος του πεδίου πρέπει να λάβετε το άθροισμα των τιμών. Για παράδειγμα, με τιμές 20px και -18px το μέγεθος του πεδίου θα είναι:
  20 + (-18) = 20 – 18 = 2 pixel.
• Εάν και οι δύο τιμές είναι αρνητικές, συγκρίνονται οι συντελεστές αυτών των αριθμών και επιλέγεται ο αριθμός με το μεγαλύτερο συντελεστή (άρα, ο μικρότερος από τους αρνητικούς αριθμούς). Παράδειγμα: πρέπει να συγκρίνετε τις τιμές των πεδίων -6px και -8px. Οι συντελεστές των αριθμών που συγκρίνονται είναι 6 και 8, αντίστοιχα. Έπεται ότι το 6 -8. Το μέγεθος του πεδίου που προκύπτει είναι -8 pixel.
• Στην περίπτωση που οι τιμές καθορίζονται στο διαφορετικές μονάδες CSS, μειώνονται σε ένα, μετά συγκρίνονται και επιλέγεται η μεγαλύτερη τιμή.
• Το μέγεθος του περιθωρίου για τα θυγατρικά στοιχεία καθορίζεται με έναν ακόμη πιο ενδιαφέρον τρόπο: εάν ένα παιδί έχει μεγαλύτερο περιθώριο από τον γονέα του, τότε δίνεται προτεραιότητα σε αυτό. Σε αυτήν την περίπτωση, τα μεγέθη των άνω και κάτω περιθωρίων του γονέα θα είναι τα ίδια με αυτά που καθορίζονται για το παιδί. Σε αυτή την περίπτωση, δεν θα υπάρχει απόσταση μεταξύ γονέα και παιδιού.

Τα περιθώρια και το padding είναι πολύ σημαντικά στυλ κατά τη δημιουργία μιας σελίδας HTML. Σας επιτρέπουν να τοποθετήσετε με μεγαλύτερη ακρίβεια στοιχεία, να δημιουργήσετε ένα πλαίσιο με τα απαραίτητα κενά κ.λπ. Και τα δύο στυλ μοιάζουν πολύ και εκτελούν παρόμοιες λειτουργίες. Αλλά εξακολουθούν να υπάρχουν διαφορές.

Τα στοιχεία μπορούν να είναι ένθετα ή να βρίσκονται το ένα δίπλα στο άλλο. Ας δούμε το παρακάτω παράδειγμα:

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

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

Υπάρχουν διάφοροι τρόποι για να ορίσετε αυτά τα στυλ. Για παράδειγμα, καθορίστε απευθείας το μέγεθος όλων των περιθωρίων ή των εσοχών με ένα όρισμα σε κάποια μονάδα μέτρησης (px, ex, em, pt, cm κ.λπ.):

padding: 3px; περιθώριο: 3px;

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

padding: 3px 5px; περιθώριο: 3px 5px;

το πρώτο θα καθορίσει το ποσό των περιθωρίων/εσοχών στο επάνω και κάτω μέρος, το δεύτερο - στα αριστερά και στα δεξιά. Όταν δίνονται τρία επιχειρήματα:

padding: 3px 5px 2px; περιθώριο: 3px 5px 2px;

το πρώτο είναι το περιθώριο/εσοχή στο επάνω μέρος, το δεύτερο είναι και αριστερά και δεξιά, το τρίτο είναι στο κάτω μέρος. Με τέσσερα επιχειρήματα:

padding: 3px 5px 2px 6px; περιθώριο : 3px 5px 2px 6px ;

το πρώτο είναι το περιθώριο/κενό στην κορυφή, το δεύτερο είναι στα δεξιά, το τρίτο είναι στο κάτω μέρος, το τέταρτο είναι στα αριστερά. Είναι εύκολο να το θυμάστε: το πρώτο είναι από την κορυφή και μετά δεξιόστροφα. Επιπλέον, μπορείτε να ορίσετε περιθώρια και padding για μια συγκεκριμένη άκρη ξεχωριστά, χρησιμοποιώντας τα κατάλληλα στυλ: padding-top, padding-right, padding-bottom, padding-αριστερά, περιθώριο-κορυφή, περιθώριο-δεξιά, περιθώριο-κάτω, περιθώριο-αριστερά. Η τιμή αυτών των στυλ μπορεί να είναι μόνο ένα όρισμα, το οποίο καθορίζει το μέγεθος του περιθωρίου/γεμίσματος για μια δεδομένη πλευρά.

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

padding: 5px;

Ως αποτέλεσμα, η σελίδα θα αλλάξει ως εξής:

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

margin-top: 5px;

Λάβετε υπόψη ότι ορίζουμε την εσοχή ειδικά στον πίνακα και όχι στο κελί του πίνακα, όπως συμβαίνει με τα πεδία. Ιδού το αποτέλεσμα:

Παρεμπιπτόντως, στην πρώτη περίπτωση (το κενό μεταξύ του κόκκινου μπλοκ και των ορίων του γονικού κελιού), το ίδιο αποτέλεσμα θα μπορούσε να επιτευχθεί ορίζοντας τις εσοχές μπλοκ. Γενικά, αν κάτι δεν είναι ξεκάθαρο, ενημερώστε μας στα σχόλια.

Κώδικας HTML της πειραματικής σελίδας:

<html > <κεφάλι > <τίτλος >Δοκιμή</τίτλος> <meta http-equiv = περιεχόμενο "Τύπος περιεχομένου" = "text/html;charset=utf-8" > </κεφάλι> <σώμα > <στυλ >πίνακας (πλάτος: 200 εικονοστοιχεία, ύψος: 150 εικονοστοιχεία, περίγραμμα: 1 εικονοστοιχείο συμπαγές #555, σύμπτυξη περιγράμματος: σύμπτυξη) td (κάθετη στοίχιση: επάνω, επένδυση: 0 εικονοστοιχεία) div (πλάτος: 100 εικονοστοιχεία, ύψος: 100 εικονοστοιχεία, φόντο: κόκκινο)</στυλ> <στυλ τραπεζιού = "φόντο: ασβέστης" > <tr > <td style = "padding: 5px" > <div style = "περιθώριο: 0px" ></div> </td> </tr> </πίνακας> <στυλ τραπεζιού = "φόντο: μπλε του ουρανού; περιθώριο κορυφής: 5 εικονοστοιχεία"> <tr > <td ></td> </tr> </πίνακας> </σώμα> </html>Επένδυση

Ελπίζω να είστε ήδη εξοικειωμένοι με τη δομή του μπλοκ. Αν όχι, παρουσιάζεται παρακάτω.

Δομή μπλοκ

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

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

Ετσι. Τα περιθώρια καθορίζονται από την ιδιότητα padding. Αυτές είναι οι εσωτερικές αποστάσεις από τα όρια του μπλοκ έως το περιεχόμενό του.

Η ιδιότητα ισχύει για όλα τα στοιχεία.

Η απόσταση καθορίζεται σε μονάδες μήκους CSS, %, ή ( Προκαθορισμένο

Η ιδιότητα padding είναι καθολική επειδή ορίζει τα περιθώρια από τα όρια ενός στοιχείου στο περιεχόμενό του για όλες τις πλευρές του, συνδυάζοντας έτσι τις ιδιότητες padding-top , padding-right , padding-bottom και padding-left , οι οποίες ορίζουν το πλάτος του περιθώρια για κάθε πλευρικό στοιχείο ξεχωριστά.

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

Η ιδιότητα περιθωρίου ισχύει επίσης για όλα τα στοιχεία.

Η συμπλήρωση καθορίζεται επίσης σε μονάδες μήκους CSS, %, ή ( Προκαθορισμένο) εντοπίζεται αυτόματα από το πρόγραμμα περιήγησης.

Η ιδιότητα περιθωρίου είναι καθολική, καθώς ορίζει την ποσότητα της εσοχής από τα όρια ενός στοιχείου για όλες τις πλευρές του, συνδυάζοντας έτσι τις ιδιότητες margin-top , margin-right , margin-bottom και margin-left , οι οποίες ορίζουν το πλάτος των εσοχών από κάθε περίγραμμα του στοιχείου ξεχωριστά .

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

Απόσπασμα κώδικα: