Properti padding adalah properti shorthand untuk mengatur empat properti padding: padding-top, padding-right, padding-bottom, dan padding-left, dalam satu deklarasi.

Setiap elemen di halaman web berbentuk segi empat. Setiap elemen memiliki model kotak persegi panjang, yang menggambarkan masing-masing kotak persegi panjang (area) yang dihasilkan untuk elemen: kotak konten, kotak padding, kotak pembatas, dan kotak margin. Kotak konten ada untuk setiap elemen. Kotak padding, border, dan margin adalah opsional, dan keberadaannya tergantung pada apakah kalian menerapkan padding, border, atau margin ke elemen.

Kotak model elemen dalam CSS — mencakup konten, padding, border, dan area margin.

Padding biasanya digunakan untuk menghitung lebar dan tinggi elemen. Lebar biasanya sama dengan lebar area konten (ditetapkan menggunakan properti width) plus lebar area padding. Misalnya, jika lebar elemen ditetapkan menjadi ‘300px’, dan lebar paddingnya (kiri dan kanan) berjumlah hingga ’60px ’, maka total elemen terhitung yang dihitung adalah‘ 360px ’, bukan‘ 300px ’. Alasan yang sama berlaku untuk ketinggian elemen yang dihitung.

Penulisan penggunaan property Padding:

Syntax:

 

Awal: 0 0 0 0; yang merupakan gabungan dari masing-masing sifatnya

Bisa digunakan untuk semua elemen kecuali table-row-group, table-header-group, table-footer-group, table-row, table-column-group dan table-column

Dapat di-animasikan: ya, masing-masing dari sifat-sifat longhand dapat di dianimasikan sebagai length.

Sebagai tambahan, value dari Padding tidak bisa negatif. Sebuah elemen juga dapat mewarisi nilai paddingnya dari induknya menggunakan kata kunci inherit (mewarisi). Sebagai contoh:

 

Contoh penggunaan Property Padding: