Στην ενότητα αυτή θα δούμε πως ορίζουμε περιθώριο padding, με χρήση CSS. Το περιθώριο padding είναι το κενό διάστημα μεταξύ του πλαισίου (border) του στοιχείου και του περιεχόμενου του στοιχείου αυτού. Δείτε παρακάτω την εικόνα του Box model, στην οποία απεικονίζονται οι περιοχές margin, border και padding ενός στοιχείου:

box model

Για παράδειγμα, το περιθώριο padding του πρώτου κελιού του παρακάτω πίνακα αναπαριστάται με τις κόκκινες γραμμές


Το περιθώριο padding της παρακάτω παραγράφου είναι το κενό διάστημα μεταξύ του πλαισίου της παραγράφου και του περιεχομένου αυτής.
Με την ιδιότητα padding ορίζουμε κενή περιοχή μεταξύ του πλαισίου (border) του στοιχείου και του ίδιου του περιεχόμενου του στοιχείου. Η κενή περιοχή που ορίζει η ιδιότητα έχει το ίδιο background με το ίδιο στοιχείο.

Οι τιμές που μπορεί να πάρει η ιδιότητα είναι:
  • auto (η τιμή καθορίζεται από τον browser)
  • αριθμός σε pixels
  • αριθμός σε cm
  • αριθμός σε %

Τρόποι σύνταξης

Μπορούμε να ορίσουμε διαφορετικές τιμές για τις 4 πλευρές του στοιχείου με τις ιδιότητες: padding-top, padding-right, padding-bottom και padding-left.

Ορισμός διαφορετικού padding για τις τέσσερεις πλευρές του στοιχείου
.paragraph {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 2%;
padding-left: 40px;
}
Η παράγραφος του παραπάνω παραδείγματος εμφανίζει μια παράγραφο με πάνω padding 10px, δεξιο padding 30px, κάτω padding 2% και αριστερό padding 40px

Ένας άλλος τρόπος, πιο σύντομος, είναι η χρήση της ιδιότητας padding η οποία μπορεί να πάρει από μια έως τέσσερεις τιμές που αντιστοιχούν στις 4 πλευρές του στοιχείου. Παρακάτω θα δούμε με παραδείγματα τους τρόπους σύνταξης της ιδιότητας padding.

Η ιδιότητα padding με μια τιμή
.pinakas_apotelesmatwn {
padding: 15px;
}
Στο στυλ ορίζουμε padding μεγέθους 15px και από τις 4 πλευρές του στοιχείου

Η ιδιότητα padding με δύο τιμές
.top_menu {
padding: 15px 10px;
}
Στο στυλ αυτό ορίζουμε padding μεγέθους 15px από την πάνω και κάτω πλευρά και 10px από την δεξιά και αριστερή πλευρά

Η ιδιότητα padding με τρεις τιμές
#copyright {
padding: 15px 10px 5%;
}
Σε αυτό το στυλ ορίζουμε padding μεγέθους 15px από την πάνω, 10px την δεξιά και την αριστερή πλευρά και 5% από την κάτω

Η ιδιότητα padding με τέσσερεις τιμές
#right {
padding: 15px 10px 5% 40px;
}
Σε αυτό το στυλ ορίζουμε padding μεγέθους 15px από την πάνω, 10px από την δεξιά, 5% από την κάτω και 40% από την αριστερή πλευρά

Στο παρακάτω παράδειγμα τα δύο στυλ έχουν ακριβώς το ίδιο αποτέλεσμα, αν και είναι γραμμένα με δύο διαφορετικούς τρόπους:

Σύγκριση των δύο τρόπων ορισμού του padding
.tropos1 {
padding-top: 10px;
padding-right: 0;
padding-bottom: 2%;
padding-left: 40px;
}

.tropos2 {
padding: 10px 0 2% 40px;
}

Ιδιότητες της CSS για το περιθώριο (padding) των στοιχείων

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες ορισμού του περιθωρίου padding ενός στοιχείου της σελίδας:
ΙδιότηταΤιμέςΠεριγραφή
padding padding-top
padding-right
padding-bottom
padding-left
Η ιδιότητα αυτή είναι συντομογραφία των τεσσάρων ιδιοτήτων ορισμού περιθωρίου padding για τις τέσσερεις πλευρές ενός στοιχείου: padding-top, padding-right, padding-bottom και padding-left
Δοκίμασε το
padding-bottom auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το περιθώριο padding μεταξύ του περιεχομένου του στοιχείου και της κάτω πλευράς του στοιχείου
Δοκίμασε το
padding-left auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το περιθώριο padding μεταξύ του περιεχομένου του στοιχείου και της αριστερής πλευράς του στοιχείου
Δοκίμασε το
padding-right auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το περιθώριο padding μεταξύ του περιεχομένου του στοιχείου και της δεξιάς πλευράς του στοιχείου
Δοκίμασε το
padding-top auto
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
Ορίζει το περιθώριο padding μεταξύ του περιεχομένου του στοιχείου και της πάνω πλευράς του στοιχείου
Δοκίμασε το

Παραδείγματα

Ορισμός περιθωρίου padding για μια παράγραφο
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε διαφορετικού μήκους περιθώρια padding για κάθε πλευρά μιας παραγράφου. (ιδιότητα padding)
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.