Στην ενότητα αυτή θα δούμε πως ορίζουμε περιθώριο padding, με χρήση CSS. Το περιθώριο padding είναι το κενό διάστημα μεταξύ του πλαισίου (border) του στοιχείου και του περιεχόμενου του στοιχείου αυτού. Δείτε παρακάτω την εικόνα του Box model, στην οποία απεικονίζονται οι περιοχές margin, border και padding ενός στοιχείου:
Για παράδειγμα, το περιθώριο padding του πρώτου κελιού του παρακάτω πίνακα αναπαριστάται με τις κόκκινες γραμμές
Το περιθώριο padding της παρακάτω παραγράφου είναι το κενό διάστημα μεταξύ του πλαισίου της παραγράφου και του περιεχομένου αυτής.
Με την ιδιότητα padding ορίζουμε κενή περιοχή μεταξύ του πλαισίου (border) του στοιχείου και του ίδιου του περιεχόμενου του στοιχείου. Η κενή περιοχή που ορίζει η ιδιότητα έχει το ίδιο background με το ίδιο στοιχείο.
Οι τιμές που μπορεί να πάρει η ιδιότητα είναι:
Για παράδειγμα, το περιθώριο padding του πρώτου κελιού του παρακάτω πίνακα αναπαριστάται με τις κόκκινες γραμμές
Το περιθώριο padding της παρακάτω παραγράφου είναι το κενό διάστημα μεταξύ του πλαισίου της παραγράφου και του περιεχομένου αυτής.
Με την ιδιότητα padding ορίζουμε κενή περιοχή μεταξύ του πλαισίου (border) του στοιχείου και του ίδιου του περιεχόμενου του στοιχείου. Η κενή περιοχή που ορίζει η ιδιότητα έχει το ίδιο background με το ίδιο στοιχείο. Οι τιμές που μπορεί να πάρει η ιδιότητα είναι:
- auto (η τιμή καθορίζεται από τον browser)
- αριθμός σε pixels
- αριθμός σε cm
- αριθμός σε %
Τρόποι σύνταξης
Μπορούμε να ορίσουμε διαφορετικές τιμές για τις 4 πλευρές του στοιχείου με τις ιδιότητες: padding-top, padding-right, padding-bottom και padding-left.
Ένας άλλος τρόπος, πιο σύντομος, είναι η χρήση της ιδιότητας padding η οποία μπορεί να πάρει από μια έως τέσσερεις τιμές που αντιστοιχούν στις 4 πλευρές του στοιχείου. Παρακάτω θα δούμε με παραδείγματα τους τρόπους σύνταξης της ιδιότητας padding.
Στο παρακάτω παράδειγμα τα δύο στυλ έχουν ακριβώς το ίδιο αποτέλεσμα, αν και είναι γραμμένα με δύο διαφορετικούς τρόπους:
Ορισμός διαφορετικού padding για τις τέσσερεις πλευρές του στοιχείου
.paragraph {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 2%;
padding-left: 40px;
}
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;
}
Στο στυλ ορίζουμε padding μεγέθους 15px και από τις 4 πλευρές του στοιχείου
Η ιδιότητα padding με δύο τιμές
.top_menu {
padding: 15px 10px;
}
padding: 15px 10px;
}
Στο στυλ αυτό ορίζουμε padding μεγέθους 15px από την πάνω και κάτω πλευρά και 10px από την δεξιά και αριστερή πλευρά
Η ιδιότητα padding με τρεις τιμές
#copyright {
padding: 15px 10px 5%;
}
padding: 15px 10px 5%;
}
Σε αυτό το στυλ ορίζουμε padding μεγέθους 15px από την πάνω, 10px την δεξιά και την αριστερή πλευρά και 5% από την κάτω
Η ιδιότητα padding με τέσσερεις τιμές
#right {
padding: 15px 10px 5% 40px;
}
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;
}
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)
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε διαφορετικού μήκους περιθώρια padding για κάθε πλευρά μιας παραγράφου. (ιδιότητα padding)
