Επένδυση - CSS-Κόλπα

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

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

Εδώ είναι ένα απλό παράδειγμα:

.box ( padding: 0 1.5em 0 1.5em; )

Το παραπάνω παράδειγμα χρησιμοποιεί τη paddingστενή ιδιότητα, η οποία δέχεται έως και τέσσερις τιμές, που εμφανίζονται εδώ:

.box ( padding: || || || )

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

.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )

Έτσι, εάν ορίζεται μόνο μία τιμή, αυτό ορίζει και τις τέσσερις ιδιότητες γεμίσματος στην ίδια τιμή:

.box ( padding: 20px; )

Εάν δηλωθούν τρεις τιμές, είναι padding: (top) (left-and-right) (bottom);.

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

.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )

Υπολογισμοί πλάτους και στοιχείων

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

Για παράδειγμα:

.box ( padding: 20px; width: 400px; )

Σε αυτό το παράδειγμα, παρόλο που το .boxστοιχείο έχει ρητό πλάτος 400 εικονοστοιχεία, το πραγματικό πλάτος του στοιχείου στη σελίδα θα είναι 440 εικονοστοιχεία. Αυτό λαμβάνει υπόψη όχι μόνο το πλάτος των 400 εικονοστοιχείων, αλλά και τα 20 εικονοστοιχεία της αριστερής επένδυσης και τα 20 εικονοστοιχεία της δεξιάς επένδυσης (ορίζεται με στενότητα πλήρωσης στο προηγούμενο παράδειγμα)

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

Δείτε αυτό το στυλό!

Αυτό συμβαίνει σε όλα τα προγράμματα περιήγησης που χρησιμοποιούνται, σε λειτουργία τυπικής, αλλά δεν θα συμβεί σε IE6 και IE7 σε λειτουργία quirks (δηλαδή, σε σελίδες που εμφανίζονται στο IE6 ή IE7 όπου δεν υπάρχει δηλωμένος τύπος ή όπου συμβαίνει κάτι άλλο για να προκαλέσει ιδιορρυθμίες τρόπος).

Για να επιλύσετε αυτό το ζήτημα, διατηρώντας έτσι το πλάτος στα 400 εικονοστοιχεία ανεξάρτητα από το μέγεθος της επένδυσης, μπορείτε να χρησιμοποιήσετε την box-sizingιδιότητα:

.box ( padding: 20px; width: 400px; box-sizing: border-box; )

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