Η ιδιότητα padding χρησιμοποιείται για να δημιουργήσει χώρο γύρω από το περιεχόμενο ενός στοιχείου, μέσα στα οριοθετημένα περιθώρια.
Οι ιδιότητες padding που μπορούν να χρησιμοποιηθούν είναι οι εξής:
- padding-top: Ορίζει το περιθώριο στο πάνω μέρος του στοιχείου.
- padding-right: Ορίζει το περιθώριο στη δεξιά πλευρά του στοιχείου.
- padding-bottom: Ορίζει το περιθώριο στο κάτω μέρος του στοιχείου.
- padding-left: Ορίζει το περιθώριο στην αριστερή πλευρά του στοιχείου.
Μπορείτε να ορίσετε τις παραπάνω ιδιότητες για να καθορίσετε τα περιθώρια για το περιεχόμενο ενός στοιχείου. Οι τιμές μπορούν να είναι σε μονάδες μέτρησης όπως px, pt, cm, em, κλπ, ή μπορείτε να χρησιμοποιήσετε ποσοστά ή τη λέξη-κλειδί auto.
Η CSS παρέχει ιδιότητες για την καθορισμό του padding για κάθε πλευρά ενός στοιχείου:
padding-top: Ορίζει το padding στο πάνω μέρος του στοιχείου.padding-right: Ορίζει το padding στη δεξιά πλευρά του στοιχείου.padding-bottom: Ορίζει το padding στο κάτω μέρος του στοιχείου.padding-left: Ορίζει το padding στην αριστερή πλευρά του στοιχείου.
Οι ιδιότητες padding μπορούν να έχουν τις εξής τιμές:
length: Καθορίζει το padding με μια συγκεκριμένη μονάδα μέτρησης όπως px, pt, cm, κλπ.%: Καθορίζει το padding σε ποσοστό του πλάτους του γονικού στοιχείου.inherit: Καθορίζει ότι το padding θα κληρονομηθεί από το γονικό στοιχείο.
Πρέπει να σημειωθεί ότι αρνητικές τιμές δεν επιτρέπονται για το padding.
Ας υποθέσουμε ότι έχουμε ένα στοιχείο <div> και θέλουμε να ορίσουμε διαφορετικά περιθώρια για κάθε πλευρά του:
<div class="box">Content</div>
Και τον ακόλουθο CSS κώδικα:
.box {
/* Προσθέτει περιθώριο πάνω */
padding-top: 20px;
/* Προσθέτει περιθώριο δεξιά */
padding-right: 30px;
/* Προσθέτει περιθώριο κάτω */
padding-bottom: 40px;
/* Προσθέτει περιθώριο αριστερά */
padding-left: 10px;
/* Ορίζει το χρώμα του φόντου σε γκρι */
background-color: gray;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
}
Στο παραπάνω παράδειγμα, ορίζουμε διάφορα περιθώρια για κάθε πλευρά του στοιχείου <div>. Το περιθώριο στο πάνω μέρος είναι 20px, στη δεξιά πλευρά είναι 30px, στο κάτω μέρος είναι 40px και στην αριστερή πλευρά είναι 10px.
Μπορείτε να δοκιμάσετε το παραπάνω παράδειγμα και να δείτε πώς τα διάφορα περιθώρια καθορίζουν τον χώρο γύρω από το περιεχόμενο του στοιχείου.
Για να συντομεύσουμε τον κώδικα, είναι δυνατόν να καθορίσουμε όλες τις ιδιότητες padding με έναν μόνο κανόνα.
[adinserter block=”2″]
Η ιδιότητα padding είναι μια συντόμευση για τις ακόλουθες ιδιότητες padding:
- padding-top: Ορίζει το padding στο πάνω μέρος.
- padding-right: Ορίζει το padding στη δεξιά πλευρά.
- padding-bottom: Ορίζει το padding στο κάτω μέρος.
- padding-left: Ορίζει το padding στην αριστερή πλευρά.
Μπορείτε να ορίσετε τιμές για όλες αυτές τις ιδιότητες χρησιμοποιώντας την ιδιότητα padding. Για παράδειγμα:
.box {
/* Προσθέτει περιθώριο στην επάνω πλευρά 20px,
δεξιά πλευρά 30px, κάτω πλευρά 40px,
αριστερή πλευρά 10px */
padding: 20px 30px 40px 10px;
/* Ορίζει το χρώμα του φόντου σε γκρι */
background-color: gray;
/* Ορίζει το ύψος του στοιχείου σε 100px */
height: 100px;
}
Στο παραπάνω παράδειγμα, το padding παρατίθεται ως μια συντόμευση για το padding-top: 20px, padding-right: 30px, padding-bottom: 40px και padding-left: 10px.
Μπορείτε να δοκιμάσετε το παραπάνω παράδειγμα και να δείτε πώς η συντόμευση του padding διαμορφώνει το περιθώριο γύρω από το περιεχόμενο του στοιχείου.
Ας υποθέσουμε ότι έχουμε ένα στοιχείο <div> με κείμενο μέσα και θέλουμε να του προσθέσουμε περιθώρια σε όλες τις πλευρές χρησιμοποιώντας τη συντόμευση του padding:
<div class="box">Lorem ipsum dolor sit amet</div>
Και τον ακόλουθο CSS κώδικα:
.box {
/* Προσθέτει περιθώριο 20px σε όλες τις πλευρές */
padding: 20px;
/* Ορίζει το χρώμα του φόντου σε γκρι */
background-color: gray;
/* Ορίζει το χρώμα του κειμένου σε λευκό */
color: white;
}
Στο παραπάνω παράδειγμα, έχουμε ορίσει ένα padding των 20px για όλες τις πλευρές του στοιχείου <div>. Το padding δημιουργεί ένα περιθώριο 20px γύρω από το κείμενο του στοιχείου.
Μπορείτε να δοκιμάσετε το παραπάνω παράδειγμα και να δείτε πώς το padding προσθέτει χώρο γύρω από το κείμενο του στοιχείου, με το περιθώριο να έχει μέγεθος 20px σε όλες τις πλευρές.
Οι ιδιότητες width και padding στη CSS λειτουργούν μαζί για τον καθορισμό του μεγέθους ενός στοιχείου.
Όταν ορίζετε μια τιμή για την ιδιότητα width, αυτή αναφέρεται στο περιεχόμενο του στοιχείου, χωρίς το padding, το border και το margin. Δηλαδή, το width ορίζει το πλάτος της περιοχής του περιεχομένου ενός στοιχείου.
Ωστόσο, όταν προσθέτετε padding σε ένα στοιχείο με ορισμένο width, το padding προστίθεται στο συνολικό πλάτος του στοιχείου. Αυτό έχει ως αποτέλεσμα το στοιχείο να είναι πιο ευρύ από το προκαθορισμένο width, καθώς το padding αυξάνει το μέγεθος της περιοχής του περιεχομένου.
Για να αποφύγετε αυτήν την ανεπιθύμητη συμπεριφορά, μπορείτε να χρησιμοποιήσετε το box-sizing property με την τιμή border-box. Αυτό εξασφαλίζει ότι το padding και το border θα προστεθούν εντός του width, διατηρώντας έτσι το συνολικό πλάτος του στοιχείου αμετάβλητο.
Για παράδειγμα:
.box {
/* Ορίζει το πλάτος του στοιχείου σε 300px */
width: 300px;
/* Προσθέτει περιθώριο 20px σε όλες τις πλευρές του στοιχείου */
padding: 20px;
/* Ορίζει το box-sizing ως border-box, ώστε το πλάτος και το ύψος του στοιχείου να λαμβάνουν υπόψην και το πάχος των περιθωρίων και των περιγραμμάτων */
box-sizing: border-box;
}
Στο παραπάνω παράδειγμα, το box-sizing: border-box δηλώνει ότι το padding θα προστεθεί εντός του width, και όχι επάνω του, εξασφαλίζοντας έτσι ότι το στοιχείο θα έχει συνολικό πλάτος 300px όπως ορίστηκε, συμπεριλαμβανομένου του padding.