Ιδιότητα padding
Η ιδιότητα padding ορίζει το εσωτερικό
padding ενός στοιχείου. Ως τιμές της ιδιότητας μπορούν να χρησιμοποιηθούν
οποιεσδήποτε μονάδες
μεγέθους. Από προεπιλογή, κάθε πρόγραμμα περιήγησης
μπορεί να προσθέσει διαφορετικά padding στα στοιχεία.
Η ιδιότητα είναι μια συντόμευση για τις ιδιότητες
padding-top,
padding-right,
padding-bottom,
padding-left.
Σύνταξη
επιλογέας {
padding: τιμή;
}
Αριθμός παραμέτρων
Η ιδιότητα padding δέχεται 1,
2, 3 ή 4 τιμές,
που αναφέρονται διαχωρισμένες με κενό:
| Αριθμός | Περιγραφή |
|---|---|
1 |
Μία τιμή ορίζει padding και από τις τέσσερις πλευρές του στοιχείου. |
2 |
Η πρώτη τιμή ορίζει padding πάνω και κάτω, και η δεύτερη - δεξιά και αριστερά. |
3 |
Η πρώτη τιμή ορίζει padding πάνω, η δεύτερη - δεξιά και αριστερά, και η τρίτη - κάτω. |
4 |
Η πρώτη τιμή ορίζει padding πάνω, η δεύτερη - δεξιά, η τρίτη - κάτω, και η τέταρτη - αριστερά. |
Παράδειγμα
Σε αυτήν την περίπτωση, από προεπιλογή το εσωτερικό padding θα είναι μηδέν και το κείμενο θα εφάπτεται στο όριο του μπλοκ:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Παράδειγμα
Τώρα ας ορίσουμε εσωτερικό padding
30px:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Παράδειγμα
Τώρα το padding πάνω και κάτω θα είναι 20px,
και δεξιά και αριστερά - 5px:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Παράδειγμα
Τώρα το padding πάνω είναι 5px, δεξιά -
15px, κάτω - 25px, αριστερά -
35px:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Δείτε επίσης
-
η ιδιότητα
margin,
που ορίζει εξωτερικό padding