Properti padding
Properti padding mengatur padding internal
elemen. Nilai properti dapat berupa
unit
untuk ukuran apa pun. Secara default, setiap browser
dapat menambahkan berbagai padding ke elemen.
Properti ini merupakan singkatan untuk properti
padding-top,
padding-right,
padding-bottom,
padding-left.
Sintaks
selektor {
padding: nilai;
}
Jumlah parameter
Properti padding menerima 1,
2, 3 atau 4 nilai,
yang disebutkan dipisahkan oleh spasi:
| Jumlah | Deskripsi |
|---|---|
1 |
Satu nilai mengatur padding dari semua sisi elemen. |
2 |
Nilai pertama mengatur padding atas dan bawah, dan nilai kedua - kanan dan kiri. |
3 |
Nilai pertama mengatur padding atas, nilai kedua - kanan dan kiri, dan nilai ketiga - bawah. |
4 |
Nilai pertama mengatur padding atas, nilai kedua - kanan, nilai ketiga - bawah, dan nilai keempat - kiri. |
Contoh
Dalam kasus ini, secara default padding internal akan nol dan teks akan menempel ke batas blok:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Contoh
Dan sekarang mari kita buat padding internal
sebesar 30px:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Contoh
Sekarang padding atas dan bawah akan 20px,
dan kanan dan kiri - 5px:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Contoh
Sekarang padding atas 5px, kanan -
15px, bawah - 25px, kiri -
35px:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Lihat juga
-
properti
margin,
yang mengatur margin eksternal