
Το CSS padding είναι μία από τις ιδιότητες του μοντέλου CSS box. Αυτή η στενή ιδιότητα ρυθμίζει την επένδυση και στις τέσσερις πλευρές ενός στοιχείου HTML. Το CSS padding μπορεί να εφαρμοστεί σε σχεδόν κάθε ετικέτα HTML (εκτός από μερικές από τις ετικέτες πίνακα). Επιπλέον, και οι τέσσερις πλευρές του στοιχείου μπορούν να έχουν διαφορετική τιμή.
Ιδιότητα CSS Padding
Για να χρησιμοποιήσετε την ιδιότητα shorthand CSS padding, μπορείτε να χρησιμοποιήσετε το μνημονικό «TRouBLe» (ή «TRiBbLe» για τους λάτρεις του Star Trek). Αυτό σημαίνει μπλουζα, σωστά, κάτω μέρος, και αριστερά, και αναφέρεται στη σειρά των πλάτους επένδυσης που έχετε ορίσει στην στενή ιδιότητα. Για παράδειγμα: padding: πάνω δεξιά κάτω αριστερά.
επένδυση: 1px 2px 3px 6px;
Εάν χρησιμοποιήσατε τις τιμές που αναφέρονται παραπάνω, θα εφαρμοζόταν μια διαφορετική τιμή padding σε κάθε πλευρά οποιουδήποτε στοιχείου HTML στο οποίο εφαρμόζετε. Εάν θέλετε να εφαρμόσετε την ίδια επένδυση και στις τέσσερις πλευρές, μπορείτε να απλοποιήσετε το CSS σας και να γράψετε μια μόνο τιμή: padding: 12px;
Με αυτήν τη γραμμή CSS, 12 εικονοστοιχεία της επένδυσης θα εφαρμοστούν και στις 4 πλευρές του στοιχείου. Εάν θέλετε το παραγέμισμα να είναι το ίδιο για το πάνω και το κάτω μέρος και αριστερά και δεξιά, μπορείτε να γράψετε δύο τιμές: padding: 24px 48px;
Η πρώτη τιμή (24 εικονοστοιχεία) θα ισχύει για το πάνω και το κάτω μέρος, ενώ η δεύτερη θα ισχύει για το αριστερό και το δεξί. Εάν γράψετε τρεις τιμές, αυτό θα κάνει την οριζόντια επένδυση (αριστερά και δεξιά) ίδια, αλλάζοντας το επάνω και το κάτω μέρος: padding: πάνω δεξιά και αριστερά κάτω.
επένδυση: 0px 1px 3px;
Σύμφωνα με το μοντέλο CSS box, το padding είναι πιο κοντά στο ίδιο το στοιχείο / περιεχόμενο. Αυτό σημαίνει ότι η επένδυση προστίθεται σε ένα στοιχείο ανάμεσα στο πλάτος ή το ύψος του περιεχομένου και τις οριακές τιμές που χρησιμοποιείτε. Εάν η επένδυση έχει οριστεί στο μηδέν, τότε έχει το ίδιο άκρο με το περιεχόμενο.
Τιμές πλήρωσης CSS
Το CSS padding μπορεί να έχει οποιαδήποτε μη αρνητική τιμή μήκους. Φροντίστε να καθορίσετε τη μέτρηση, όπως px ή em. Μπορείτε επίσης να καθορίσετε ένα ποσοστό για την επένδυση, το οποίο θα είναι ένα ποσοστό του πλάτους του μπλοκ που περιέχει το στοιχείο. Αυτό περιλαμβάνει επένδυση από πάνω και κάτω. Για παράδειγμα: #container {width: 800px; ύψος: 200px; }
#container p {πλάτος: 400 εικονοστοιχεία; ύψος: 75%; επένδυση: 25% 0; }
Το ύψος της παραγράφου μέσα στο #δοχείο στοιχείο θα είναι το 75% του #δοχείούψος συν 25% του πλάτους για το επάνω κάλυμμα και 25% του πλάτους για το κάτω κάλυμμα. Συνολικά 300 + 200 + 200 = 700 εικονοστοιχεία.
Επίδραση της προσθήκης CSS Padding
Σε στοιχεία επιπέδου μπλοκ, η επένδυση εφαρμόζεται στις τέσσερις πλευρές. Επειδή το στοιχείο είναι ήδη ένα μπλοκ ή κουτί, η επένδυση εφαρμόζεται στις πλευρές του κουτιού. Όταν προστίθεται CSS padding σε ενσωματωμένα στοιχεία, μπορεί να υπάρχει κάποια αλληλεπικάλυψη στοιχείων πάνω και κάτω από το ενσωματωμένο στοιχείο εάν η κατακόρυφη επένδυση υπερβαίνει το ύψος της γραμμής, αλλά δεν θα ωθήσει το ύψος γραμμής προς τα κάτω. Η οριζόντια επένδυση CSS που εφαρμόζεται σε ενσωματωμένα στοιχεία θα προστεθεί στην αρχή του στοιχείου και στο τέλος του στοιχείου. Και η επένδυση μπορεί να τυλίξει γραμμές. Αλλά δεν θα ισχύει για όλες τις γραμμές ενός στοιχείου πολλαπλών γραμμών, οπότε δεν μπορείτε να χρησιμοποιήσετε την επένδυση για να εσοχή ενός τμήματος ενσωματωμένου περιεχομένου πολλαπλών γραμμών. Επίσης, στο CSS2.1, δεν μπορείτε να δημιουργήσετε μπλοκ κοντέινερ όπου το πλάτος εξαρτάται από ένα στοιχείο με ποσοστά για πλάτη (ή πλάτος γεμίσματος). Εάν το κάνετε, το αποτέλεσμα είναι απροσδιόριστο. Τα προγράμματα περιήγησης θα εξακολουθούν να εμφανίζουν τα περιεχόμενα, αλλά ενδέχεται να μην έχετε τα αποτελέσματα που περιμένετε. Εάν το σκεφτείτε, έχει νόημα, σαν να χρειάζεται το στοιχείο κοντέινερ να γνωρίζει το πλάτος των θυγατρικών του στοιχείων για να καθορίσει το πλάτος του – όπως όταν δεν έχει προκαθορισμένο πλάτος και ένα ή περισσότερα έχει ένα πλάτος που ορίζεται ως ποσοστό του στοιχείου του περιέκτη, δημιουργεί μια κυκλική αλυσίδα χωρίς απάντηση. Εάν χρησιμοποιείτε ποσοστά για πλάτος οτιδήποτε στο έγγραφό σας, θα πρέπει να βεβαιωθείτε ότι ορίζονται επίσης τα πλάτη γονικού στοιχείου.
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Kyrnin, Jennifer. «Σύντομη επισκόπηση του CSS Padding.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/css-padding-overview-3469778.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Σύντομη επισκόπηση του CSS Padding. Ανακτήθηκε από το https://www.thoughtco.com/css-padding-overview-3469778
Kyrnin, Jennifer. «Σύντομη επισκόπηση του CSS Padding.» ThoughtCo. https://www.thoughtco.com/css-padding-overview-3469778 (πρόσβαση στις 27 Μαΐου 2021).
αντιγραφή παραπομπής