The paddingproperti di CSS mendefinisikan bagian terdalam dari model kotak, menciptakan ruang di sekitar konten sebuah elemen, dalam setiap margin dan / atau batas yang ditetapkan.
Nilai padding diatur menggunakan panjang atau persentase, dan tidak dapat menerima nilai negatif. Nilai awal, atau default, untuk semua properti padding adalah 0.
Berikut contoh sederhananya:
.box ( padding: 0 1.5em 0 1.5em; )Contoh di atas menggunakan paddingproperti singkatan, yang menerima hingga empat nilai, yang ditampilkan di sini:
.box ( padding: || || || )Jika kurang dari empat nilai ditetapkan, nilai yang hilang diasumsikan berdasarkan nilai yang ditentukan. Misalnya, dua set aturan berikut akan mendapatkan hasil yang identik:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Jadi, jika hanya satu nilai yang ditentukan, ini akan menyetel keempat properti padding ke nilai yang sama:
.box ( padding: 20px; )Jika tiga nilai dideklarasikan, itu adalah padding: (top) (left-and-right) (bottom);.
Setiap properti padding individual dapat dideklarasikan menggunakan longhand, dalam hal ini Anda hanya akan menentukan satu nilai per properti. Jadi contoh sebelumnya dapat ditulis ulang sebagai berikut:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Perhitungan Padding dan Lebar Elemen
Jika sebuah elemen memiliki lebar yang ditentukan, padding apa pun yang ditambahkan ke elemen tersebut akan menambah lebar total elemen. Ini seringkali merupakan hasil yang tidak diinginkan, karena membutuhkan lebar elemen yang dihitung ulang setiap kali padding disesuaikan. (Perhatikan bahwa ini juga terjadi dengan tinggi, tetapi dalam banyak kasus lebih disukai untuk tidak memberikan ketinggian yang ditetapkan pada elemen.)
Sebagai contoh:
.box ( padding: 20px; width: 400px; )Dalam contoh ini, meskipun .boxelemen diberi lebar eksplisit 400 piksel, lebar sebenarnya yang dirender dari elemen di laman adalah 440 piksel. Ini memperhitungkan tidak hanya lebar 400px, tetapi juga 20px padding kiri dan 20px padding kanan (didefinisikan dengan singkatan padding pada contoh sebelumnya).
Ini terjadi untuk mempertahankan ruang konten 400px, bukan 400px dari total lebar elemen. Inilah Pen yang mendemonstrasikan ini:
Ini terjadi di semua browser yang sedang digunakan, dalam mode standar, tetapi tidak akan terjadi di IE6 dan IE7 dalam mode quirks (yaitu, pada halaman yang ditampilkan di IE6 atau IE7 di mana tidak ada doctype yang dideklarasikan atau di mana sesuatu yang lain terjadi untuk memicu quirks mode).
Untuk mengatasi masalah ini, dengan demikian menjaga lebar pada 400px berapa pun jumlah paddingnya, Anda dapat menggunakan box-sizingproperti:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Hal ini menyebabkan elemen mempertahankan lebarnya sambil meningkatkan padding, sehingga mengurangi ruang konten yang tersedia. Ini peragaannya:
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Ya | Ya | Ya | Ya | Ya | Ya | Ya |