CSS Padding
Properti CSS Padding digunakan 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 - Individual Sides
CSS memiliki properti untuk menentukan padding untuk setiap sisi elemen:
- padding-top
- padding-right
- padding-bottom
- padding-kiri
Semua properti padding dapat memiliki nilai berikut:
- length - menentukan padding dalam px, pt, cm, dll.
- % - menentukan padding dalam% dari lebar elemen yang mengandung
- inherit - menetapkan bahwa padding harus diwarisi dari elemen induk
Catatan: Nilai negatif tidak diperbolehkan.
Contoh berikut menetapkan padding 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 pengisi dalam satu properti.
Properti padding adalah properti singkatan untuk masing-masing properti padding berikut:
- padding-top
- padding-right
- padding-bottom
- padding-kiri
Jadi, inilah cara kerjanya:
Jika properti padding memiliki empat nilai:
bantalan: 25px 50px 75px 100px;
- bantalan atas adalah 25px
- padding yang tepat adalah 50px
- padding bawah adalah 75px
- padding kiri adalah 100px
div {
padding: 25px 50px 75px 100px;
}
Jika properti padding memiliki tiga nilai:
padding: 25px 50px 75px;
- bantalan atas adalah 25px
- bantalan kanan dan kiri adalah 50px
- padding bawah adalah 75px
div {
padding: 25px 50px 75px;
}
Jika properti padding memiliki dua nilai:
padding: 25px 50px;
- bantalan atas dan bawah adalah 25px
- bantalan kanan dan kiri adalah 50px
div {
padding: 25px 50px;
}
Jika properti padding memiliki satu nilai:
padding: 25px;
- keempat bantalan adalah 25px
div {
padding: 25px;
}
Padding dan Element Width
Properti CSS Width menentukan lebar area konten elemen. Area konten adalah bagian di dalam padding, batas, dan margin elemen (the box model).
Jadi, jika suatu elemen memiliki lebar yang ditentukan, padding yang ditambahkan ke elemen itu akan ditambahkan ke total lebar elemen. Ini sering merupakan hasil yang tidak diinginkan.
Pada contoh berikut, elemen <div> diberi lebar 300px. Namun, lebar aktual yang diberikan dari elemen <div> akan menjadi 350px (300px + 25px bantalan kiri + 25px bantalan kanan):
div {
width: 300px;
padding: 25px;
}
Untuk menjaga lebar pada 300px, terlepas dari jumlah padding, Anda dapat menggunakan properti box-sizing. Ini menyebabkan elemen mempertahankan lebarnya; jika Anda menambah lapisan, ruang konten yang tersedia akan berkurang. Berikut ini sebuah contoh:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Lebih banyak contoh
Atur left padding
Contoh ini menunjukkan bagaimana mengatur padding kiri elemen <p>.
Atur right padding
Contoh ini menunjukkan cara mengatur padding yang tepat dari elemen <p>.
Atur top padding
Contoh ini menunjukkan cara mengatur bantalan atas elemen <p>.
Atur bottom padding
Contoh ini menunjukkan cara mengatur bantalan bawah elemen <p>.
Semua Tentang Kode CSS Padding:
| Tag | Description |
|---|---|
| padding | Properti singkatan untuk mengatur properti padding dalam satu deklarasi |
| padding-bottom | Mengatur padding bawah suatu elemen |
| padding-left | Mengatur padding kiri suatu elemen |
| padding-right | Mengatur padding kanan suatu elemen |
| padding-top | Menetapkan padding atas suatu elemen |
Lihat Tutorial Lengkap Tentang CSS Disini:
1. Artikel: Tutorial CSS
2. Playlist Youtube: Tutorial CSS Dasar