Σύνδεση
Μενού

Κεφάλαιο 8: CSS Padding

Padding είναι το καινό μεταξύ του περιγράμματος ενός στοιχείου του εγγράφου σας και του περιεχομένου μέσα στο στοιχείο.

Οι περισσότεροι κανόνες που εφαρμόζονται στις ιδιότητες margins είναι διαθέσιμοι και στις ιδιότητες padding, με εξαίρεση την τιμή auto και τις αρνητικές τιμές που δεν μπορούν να εφαρμοστούν στις ιδιότητες padding.

Οι ιδιότητες padding χρησιμοποιούνται όπως στο παράδειγμα που ακολουθεί:

padding-top: value;
padding-left: value;
padding-right: value;
padding-bottom: value;

Οι τιμές που μπορούν να δεχτούν οι ιδιότητες padding είναι οι ακόλουθες

Μία αριθμητική τιμή με μια μονάδα μέτρησης
Μια ποσοστιαία τιμή

Υπάρχει επίσης η δυνατότητα να εφαρμόσετε όλες τις ιδιότητες padding σε μία όπως συμβαίνει στο παράδειγμα που ακολουθεί:

padding: value_1 value_2 value_3 value_4;

Σε αυτή την περίπτωση η πρώτη τιμή αντιστοιχεί στο padding-top, η δεύτερη τιμή στο padding-right, η τρίτη στο padding-bottom και η τέταρτη στο padding-left.

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

padding: value;

Σε αυτή όμως την περίπτωση θα εφαρμοστεί η ίδια τιμή padding σε όλες τις ιδιότητες padding.

Τέλος αν θέλετε μπορείτε να ορίσετε δύο ή τρεις τιμές. όπως στα παραδείγματα που ακολουθούν:

padding: value_1 value_2;
padding: value_1 value_2 value_3;

Στην περίπτωση των δυο τιμών  η πρώτη τιμή ορίζει την ίδια τιμή στις ιδιότητες padding-top και padding-bottom, ενώ η δεύτερη τιμή ορίζει την τιμή στις ιδιότητες padding-left και padding-right;

Στην περίπτωση των τριών τιμών η πρώτη τιμή ορίζει την τιμή της ιδιότητας padding-top, η δεύτερη τιμή ορίζει τις τιμές των ιδιοτήτων padding-left και padding-right ενώ η τρίτη τιμή ορίζει την τιμή της ιδιότητας padding-bottom.

Προηγούμενο : CSS Margins
Επόμενο :  Ιδιότητες κειμένου