Lapisan CSS
Padding digunakan untuk membuat ruang di sekitar konten elemen, di dalam batas yang ditentukan.
Lapisan CSS
Properti CSS paddingdigunakan untuk menghasilkan ruang di sekitar konten elemen, di dalam batas yang ditentukan.
Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti untuk mengatur padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Padding - Sisi Individu
CSS memiliki properti untuk menentukan padding untuk setiap sisi elemen:
padding-toppadding-rightpadding-bottompadding-left
Semua properti padding dapat memiliki nilai berikut:
- panjang - menentukan padding dalam px, pt, cm, dll.
- % - menentukan padding dalam % dari lebar elemen yang mengandung
- mewarisi - menentukan bahwa padding harus diwarisi dari elemen induk
Catatan: Nilai negatif tidak diperbolehkan.
Contoh
Atur padding yang berbeda untuk keempat sisi elemen <div>:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Properti Singkatan
Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti padding dalam satu properti.
Properti paddingini adalah properti singkatan untuk properti padding individu berikut:
padding-toppadding-rightpadding-bottompadding-left
Jadi, inilah cara kerjanya:
Jika paddingproperti memiliki empat nilai:
- bantalan: 25px 50px 75px 100px;
- padding atas adalah 25px
- padding kanan adalah 50px
- padding bawah adalah 75px
- padding kiri adalah 100px
Contoh
Gunakan properti singkatan padding dengan empat nilai:
div {
padding: 25px 50px 75px 100px;
}
Jika paddingproperti memiliki tiga nilai:
- bantalan: 25px 50px 75px;
- padding atas adalah 25px
- bantalan kanan dan kiri adalah 50px
- padding bawah adalah 75px
Contoh
Gunakan properti singkatan padding dengan tiga nilai:
div {
padding: 25px 50px 75px;
}
Jika paddingproperti memiliki dua nilai:
- bantalan: 25px 50px;
- bantalan atas dan bawah adalah 25px
- bantalan kanan dan kiri adalah 50px
Contoh
Gunakan properti singkatan padding dengan dua nilai:
div {
padding: 25px 50px;
}
Jika paddingproperti memiliki satu nilai:
- bantalan: 25px;
- keempat bantalan berukuran 25px
Contoh
Gunakan properti singkatan padding dengan satu nilai:
div {
padding: 25px;
}
Padding dan Lebar Elemen
Properti CSS widthmenentukan lebar area konten elemen. Area konten adalah bagian di dalam padding, border, dan margin dari sebuah elemen ( model kotak ).
Jadi, jika sebuah elemen memiliki lebar tertentu, padding yang ditambahkan ke elemen tersebut akan ditambahkan ke total lebar elemen. Ini sering merupakan hasil yang tidak diinginkan.
Contoh
Di sini, elemen <div> diberi lebar 300px. Namun, lebar sebenarnya dari elemen <div> adalah 350px (300px + 25px padding kiri + 25px padding kanan):
div {
width: 300px;
padding: 25px;
}
Untuk menjaga lebar tetap 300px, berapa pun jumlah paddingnya, Anda dapat menggunakan
box-sizingproperti. Ini menyebabkan elemen mempertahankan lebar sebenarnya; jika Anda menambah padding, ruang konten yang tersedia akan berkurang.
Contoh
Gunakan properti box-sizing untuk menjaga lebar tetap 300px, berapa pun jumlah paddingnya:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Lebih Banyak Contoh
Contoh ini menunjukkan cara mengatur padding kiri elemen <p>.
Contoh ini menunjukkan cara mengatur padding yang tepat dari elemen <p>.
atas Contoh ini menunjukkan cara mengatur padding atas elemen <p>.
Contoh ini menunjukkan cara mengatur padding bawah elemen <p>.
Semua Properti Padding CSS
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |