Το CSS padding είναι μία από τις ιδιότητες του Μοντέλο κουτιού CSS. Αυτή η στενή ιδιότητα ρυθμίζει την επένδυση και στις τέσσερις πλευρές ενός στοιχείου HTML. Το CSS padding μπορεί να εφαρμοστεί σχεδόν σε κάθε Ετικέτα HTML (εκτός από μερικές από τις ετικέτες πίνακα). Επιπλέον, και οι τέσσερις πλευρές του στοιχείου μπορούν να έχουν διαφορετική τιμή.
Ιδιότητα CSS Padding
Για να χρησιμοποιήσετε την ιδιότητα shorthand CSS padding, μπορείτε να χρησιμοποιήσετε το μνημονικό "TRouBLe" (ή "TRiBbLe" για τους λάτρεις του Star Trek). Αυτό σημαίνει μπλουζα, σωστά, κάτω μέρος, και αριστερά, και αναφέρεται στη σειρά των πλάτους επένδυσης που έχετε ορίσει στην στενή ιδιότητα. Για παράδειγμα:
επένδυση: πάνω δεξιά κάτω αριστερά.
επένδυση: 1px 2px 3px 6px;
Εάν χρησιμοποιήσατε τις τιμές που αναφέρονται παραπάνω, θα εφαρμοζόταν μια διαφορετική τιμή γεμίσματος σε κάθε πλευρά οποιουδήποτε στοιχείου HTML στο οποίο εφαρμόζετε. Εάν θέλετε να εφαρμόσετε την ίδια επένδυση και στις τέσσερις πλευρές, μπορείτε να την απλοποιήσετε CSS και απλά γράψτε μια τιμή:
επένδυση: 12px;
Με αυτήν τη γραμμή CSS, 12 εικονοστοιχεία της επένδυσης θα εφαρμοστούν και στις 4 πλευρές του στοιχείου.
Εάν θέλετε η επένδυση να είναι ίδια για το πάνω και το κάτω και το αριστερό και το δεξί, μπορείτε να γράψετε δύο τιμές:
επένδυση: 24px 48px;
Η πρώτη τιμή (24 εικονοστοιχεία) θα ισχύει για το πάνω και το κάτω μέρος, ενώ η δεύτερη θα ισχύει για το αριστερό και το δεξί.
Εάν γράψετε τρεις τιμές, αυτό θα κάνει την οριζόντια επένδυση (αριστερά και δεξιά) ίδια, αλλάζοντας το επάνω και το κάτω μέρος:
επένδυση: πάνω δεξιά και αριστερά κάτω
επένδυση: 0px 1px 3px;
Σύμφωνα με το μοντέλο CSS box, το padding είναι πιο κοντά στο ίδιο το στοιχείο / περιεχόμενο. Αυτό σημαίνει ότι η επένδυση προστίθεται σε ένα στοιχείο ανάμεσα στο πλάτος ή το ύψος του περιεχομένου και τις οριακές τιμές που χρησιμοποιείτε. Εάν η επένδυση έχει οριστεί στο μηδέν, τότε έχει το ίδιο άκρο με το περιεχόμενο.
Τιμές πλήρωσης CSS
Το CSS padding μπορεί να έχει οποιαδήποτε μη αρνητική τιμή μήκους. Φροντίστε να καθορίσετε τη μέτρηση, όπως px ή em. Μπορείτε επίσης να καθορίσετε ένα ποσοστό για την επένδυση, το οποίο θα είναι ένα ποσοστό του πλάτους του μπλοκ που περιέχει το στοιχείο. Αυτό περιλαμβάνει επένδυση από πάνω και κάτω. Για παράδειγμα:
#container {πλάτος: 800 εικονοστοιχεία; ύψος: 200px; }
#container p {πλάτος: 400 εικονοστοιχεία; ύψος: 75%; επένδυση: 25% 0; }
ο ύψος της παραγράφου μέσα στο #δοχείο στοιχείο θα είναι το 75% του #δοχείοΤο ύψος συν το 25% του πλάτους για το επάνω κάλυμμα και το 25% του πλάτους για το κάτω κάλυμμα. Συνολικά 300 + 200 + 200 = 700 εικονοστοιχεία.
Επίδραση της προσθήκης CSS Padding
Επί στοιχεία επιπέδου μπλοκ, η επένδυση εφαρμόζεται στις τέσσερις πλευρές. Επειδή το στοιχείο είναι ήδη ένα μπλοκ ή κουτί, η επένδυση εφαρμόζεται στις πλευρές του κουτιού.
Όταν προστίθεται CSS padding ενσωματωμένα στοιχεία, μπορεί να υπάρχει κάποια επικάλυψη στοιχείων πάνω και κάτω από το ενσωματωμένο στοιχείο εάν η κατακόρυφη επένδυση υπερβαίνει το ύψος της γραμμής, αλλά δεν θα ωθήσει το ύψος της γραμμής προς τα κάτω. Η οριζόντια επένδυση CSS που εφαρμόζεται σε ενσωματωμένα στοιχεία θα προστεθεί στην αρχή του στοιχείου και στο τέλος του στοιχείου. Και η επένδυση μπορεί να τυλίξει γραμμές. Αλλά δεν θα ισχύει για όλες τις γραμμές ενός στοιχείου πολλαπλών γραμμών, οπότε δεν μπορείτε να χρησιμοποιήσετε την επένδυση για να εσοχή ενός τμήματος ενσωματωμένου περιεχομένου πολλαπλών γραμμών.
Επίσης, στο CSS2.1, δεν μπορείτε να δημιουργήσετε μπλοκ κοντέινερ όπου το πλάτος εξαρτάται από ένα στοιχείο με ποσοστά για πλάτη (ή πλάτος γεμίσματος). Εάν το κάνετε, το αποτέλεσμα είναι απροσδιόριστο. Τα προγράμματα περιήγησης θα εξακολουθούν να εμφανίζουν τα περιεχόμενα, αλλά ενδέχεται να μην έχετε τα αποτελέσματα που περιμένετε. Αν το σκεφτείτε, έχει νόημα, σαν να χρειάζεται το στοιχείο κοντέινερ να γνωρίζει το πλάτος των θυγατρικών του στοιχείων για να καθορίσει το πλάτος του - όπως όταν δεν έχει προκαθορισμένο πλάτος και ένα ή περισσότερα έχει ένα πλάτος ως ποσοστό του στοιχείου του εμπορευματοκιβωτίου, αυτό δημιουργεί μια κυκλική αλυσίδα χωρίς απάντηση. Εάν χρησιμοποιείτε ποσοστά για πλάτος οτιδήποτε στο έγγραφό σας, θα πρέπει να βεβαιωθείτε ότι ορίζονται επίσης τα πλάτη γονικού στοιχείου.