Πώς να εφαρμόσετε το Padding σε CSS με παραδείγματα



Αυτό το άρθρο θα σας δώσει μια λεπτομερή και περιεκτική γνώση σχετικά με τον τρόπο εφαρμογής του Padding στο CSS με παραδείγματα.

Η επένδυση είναι μια από τις πιο σημαντικές πτυχές του και . Σε αυτό το άρθρο θα συζητήσουμε τη σημασία και τη χρήση του Padding σε CSS με την ακόλουθη σειρά:

Τι είναι το Padding στο CSS;

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





Padding-in-CSS



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

Ιδιότητες επένδυσης

Οι ακόλουθες ιδιότητες του Padding στο CSS μπορούν να χρησιμοποιηθούν για τον έλεγχο λιστών. Ωστόσο, μπορείτε επίσης να ορίσετε διαφορετικές τιμές για την επένδυση και στις δύο πλευρές του πλαισίου χρησιμοποιώντας κυρίως τις ακόλουθες ιδιότητες:

  • Επένδυση-κάτω μέρος: καθορίζει την κάτω επένδυση ενός στοιχείου.



  • Επένδυση: Καθορίζει την επάνω επένδυση ενός στοιχείου.

  • Επένδυση-αριστερά: Καθορίζει την αριστερή επένδυση του στοιχείου.

  • Επένδυση δεξιά: Καθορίζει τη σωστή επένδυση του στοιχείου.

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

Η επένδυση-κάτω ιδιοκτησία:

Αυτό ρυθμίζεται στο κάτω μέρος ενός στοιχείου. Μπορεί να πάρει τις τιμές σε μήκος ποσοστού.

πώς να μετατρέψετε διπλό σε ακέραιο στην Java


Αυτή είναι η παράγραφος που καθορίζεται στο κάτω μέρος



Αυτή είναι μια άλλη παράγραφος που καθορίζεται στο κάτω μέρος της επένδυσης σε ποσοστό

Παραγωγή:

πώς να χρησιμοποιήσετε το goto c ++

Η επένδυση-κορυφαία ιδιοκτησία

Αυτή η ιδιότητα επένδυσης θα ρυθμίσει την επάνω επένδυση ενός στοιχείου. Αυτό μπορεί να πάρει τιμές σε μήκος ποσοστού.


Αυτή είναι η παράγραφος που καθορίζεται πάνω επένδυση



Αυτή είναι μια άλλη παραγράφου που καθορίζεται με κορυφαία επένδυση σε ποσοστό

Παραγωγή:

Η επένδυση-αριστερά ιδιοκτησία

Αυτή η ιδιότητα padding-left θα ορίσει την αριστερή επένδυση ενός στοιχείου. Μπορεί να πάρει τιμές σε μήκος ποσοστού.


Αυτή είναι η καθορισμένη παράγραφος αριστερή επένδυση



Αυτή είναι μια άλλη παράγραφος που καθορίζεται αριστερά παραγέμισμα σε ποσοστό

Παραγωγή:

Η επένδυση-δεξιά ιδιοκτησία

Αυτή η ιδιότητα padding-right θα ορίσει τη σωστή επένδυση ενός στοιχείου. Μπορεί να πάρει τιμές σε μήκος ποσοστού.


Αυτή είναι η παράγραφος που καθορίζεται δεξιά επένδυση



Αυτή είναι μια άλλη παράγραφος που καθορίζεται σωστά στο παραγέμισμα σε ποσοστό

Παραγωγή:

σχέδιο παρακολούθησης και ελέγχου έργου

Η ιδιοκτησία Padding

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


Και τα τέσσερα αυτά γεμίσματα θα είναι 20px



Η επένδυση επάνω και κάτω θα είναι 20px, δεξιά και αριστερά θα είναι το 10% του συνολικού πλάτους του εγγράφου



Η επένδυση άνω και κάτω θα είναι 20 εικονοστοιχεία, η δεξιά επένδυση θα είναι 3% του συνολικού πλάτους του εγγράφου, η επένδυση κάτω και η επένδυση κορυφής θα είναι 20 εικονοστοιχεία

Παραγωγή:

Με αυτό, καταλήγουμε σε αυτό το καταπληκτικό άρθρο σχετικά με το Padding in CSS. Ελπίζω να έχετε κατανοήσει τους διάφορους τρόπους με τους οποίους μπορούμε να προσθέσουμε padding.

Εάν σας ενδιαφέρει να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, ρίξτε μια ματιά στο από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3).

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