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