Padding area adalah ruang antara konten elemen dan bordernya.
Properti Padding CSS
Properti padding CSS memungkinkan kalian untuk mengatur padding
area untuk elemen yang bordernya terpisah dari kontennya. Padding dipengaruhi
oleh kotak background-color.
Menentukan Paddings untuk Individual Side
Kalian dapat dengan mudah menentukan padding yang berbeda untuk sisi elemen yang berbeda seperti sisi atas, kanan, bawah atau kiri menggunakan properti padding individual CSS. Berikut contohnya:
h1 {
padding-bottom: 10px;
}
p {
padding-top: 20px;
padding-left: 50px;
}
Properti Padding Shorthand
Properti padding adalah properti shorthand untuk menghindari pengaturan padding untuk setiap sisi elemen secara terpisah seperti padding-top, padding-right, padding-bottom, padding-left. Berikut contohnya:
h1 {
padding: 10px 20px;
}
p {
padding: 10px 15px 20px 25px;
}
Catatan: Tidak seperti properti margin CSS, nilai untuk properti padding tidak boleh negatif. Seperti properti margin, nilai persentase untuk properti padding merujuk ke lebar blok kotak tersebut.
Properti padding dapat mengambil satu, dua, tiga, atau empat nilai spasi yang dipisahkan.
- Jika yang ditetapkan one value, maka akan diterapkan ke keempat sisinya.
- Jika yang ditentukan two value, maka nilai pertama diterapkan ke atas dan bawah, dan nilai kedua diterapkan ke sisi kanan dan kiri.
- Jika yang ditentukan three value, nilai pertama diterapkan ke atas, nilai kedua diterapkan ke kiri dan kanan dan nilai terakhir diterapkan ke bawah.
- Jika yang ditentukan four value, maka masing-masing akan diterapkan ke atas, kanan, bawah dan kiri sesuai dengan urutan yang ditentukan.
