Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 51 : Cara Menggunakan Property Overflow di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property padding di CSS.
Properti CSS Padding digunakan untuk menentukan ruang antara konten elemen dan batas elemen.
Ini berbeda dengan margin CSS karena margin CSS mendefinisikan ruang di sekitar elemen. Padding CSS dipengaruhi oleh warna latar belakang. Ini membersihkan area di sekitar konten.
Padding atas, bawah, kiri dan kanan dapat diubah secara independen menggunakan properti terpisah.
Anda juga dapat mengubah semua properti sekaligus dengan menggunakan properti shorthand padding.
Properti CSS Padding
| Property | Deskripsi |
| padding | Digunakan untuk mengatur semua properti padding dalam satu deklarasi. |
| padding-left | Digunakan untuk mengatur padding kiri suatu elemen. |
| padding-right | Digunakan untuk mengatur padding kanan suatu elemen. |
| padding-top | Digunakan untuk mengatur padding atas suatu elemen. |
| padding-bottom | Digunakan untuk mengatur padding bawah suatu elemen. |
Nilai CSS Padding
| Nilai | Deskripsi |
| lenght | Ini digunakan untuk mendefinisikan padding tetap dalam satuan pt, px, em dll. |
| % | Ini mendefinisikan padding dalam % elemen yang memuatnya. |
Contoh CSS padding
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p> Ini adalah paragraf tanpa padding tertentu.</p>
<p class="padding"> Ini adalah paragraf dengan nilai padding tertentu.</p>
</body>
</html> Semoga tutorial property padding ini membantu Anda untuk memahami cara menentukan ruang antara konten elemen dan batas elemen di website Anda.
0 Komentar