CSS padding adalah salah satu sifat dari model kotak CSS . Properti singkat ini menetapkan padding di sekitar keempat sisi elemen HTML. CSS padding dapat diterapkan ke hampir setiap tag HTML (kecuali untuk beberapa tag tabel). Selain itu, keempat sisi elemen dapat memiliki nilai yang berbeda.
Properti Padding CSS
Untuk menggunakan properti padding CSS singkat, Anda dapat menggunakan mnemonic "TRouBLe" (atau "TRiBbLe" untuk Anda penggemar Star Trek). Ini adalah singkatan dari atas , kanan , bawah , dan kiri , dan ini merujuk pada urutan lebar padding yang Anda atur dalam properti singkatan. Sebagai contoh:
padding: kiri bawah kanan atas; padding: 1px 2px 3px 6px;Jika Anda menggunakan nilai yang tercantum di atas, itu akan menerapkan nilai padding yang berbeda ke setiap sisi elemen HTML apa pun yang Anda terapkan. Jika Anda ingin menerapkan padding yang sama untuk keempat sisinya, Anda dapat menyederhanakan CSS Anda dan hanya menulis satu nilai:
padding: 12px;Dengan garis CSS tersebut, 12 piksel padding akan berlaku untuk semua 4 sisi elemen.
Jika Anda ingin padding menjadi sama untuk bagian atas dan bawah dan kiri dan kanan, Anda dapat menulis dua nilai:
padding: 24px 48px;Nilai pertama (24px) akan berlaku untuk bagian atas dan bawah, sedangkan yang kedua akan berlaku ke kiri dan kanan.
Jika Anda menulis tiga nilai, itu akan membuat padding horizontal (kiri dan kanan) sama, ketika mengubah bagian atas dan bawah:
padding: atas kanan-kiri bawah; padding: 0px 1px 3px;Menurut model kotak CSS, padding paling dekat dengan elemen / konten itu sendiri. Ini berarti bahwa padding ditambahkan ke elemen di antara lebar atau tinggi konten dan nilai perbatasan apa pun yang Anda gunakan. Jika padding diatur ke nol, maka itu memiliki tepi yang sama dengan konten.
Nilai Padding CSS
CSS padding dapat mengambil nilai panjang non-negatif. Pastikan untuk menentukan ukuran, seperti px atau em. Anda juga dapat menentukan persentase untuk padding Anda, yang akan menjadi persentase dari lebar blok yang mengandung elemen. Ini termasuk untuk padding atas dan bawah. Sebagai contoh:
#container {width: 800px; tinggi: 200px; } #container p {width: 400px; tinggi: 75%; padding: 25% 0; }Tinggi paragraf di dalam elemen #container akan menjadi 75% dari tinggi #container ditambah 25% dari lebar untuk padding atas dan 25% dari lebar untuk padding bawah. Totalnya 300 + 200 + 200 = 700 piksel.
Efek Menambahkan Padding CSS
Pada elemen level blok , padding diterapkan pada keempat sisi. Karena elemen adalah blok atau kotak sudah, padding diterapkan ke sisi kotak.
Ketika CSS padding ditambahkan ke elemen inline , mungkin ada beberapa elemen yang tumpang tindih di atas dan di bawah elemen inline jika padding vertikal melebihi tinggi garis, tetapi tidak akan mendorong tinggi baris ke bawah. Padding CSS horizontal yang diterapkan ke elemen inline akan ditambahkan ke awal elemen dan akhir elemen. Dan padding mungkin membungkus garis. Tetapi itu tidak akan berlaku untuk semua lini elemen multi-baris, jadi Anda tidak dapat menggunakan padding untuk mengindentasikan segmen konten inline multi-baris.
Juga, di CSS2.1, Anda tidak dapat membuat blok penampung di mana lebar bergantung pada elemen dengan persentase untuk lebar (atau lebar padding). Jika Anda melakukan hasilnya tidak terdefinisi. Browser akan tetap menampilkan konten, tetapi Anda mungkin tidak mendapatkan hasil yang Anda harapkan. Jika Anda memikirkannya, itu masuk akal, seolah-olah elemen penampung Anda perlu mengetahui lebar elemen turunannya untuk menentukan lebarnya — seperti ketika tidak memiliki lebar yang ditentukan sebelumnya, dan satu atau lebih memiliki lebar ditetapkan sebagai persentase dari elemen kontainer, ini membentuk rantai melingkar tanpa jawaban. Jika Anda menggunakan persentase untuk lebar apa pun pada dokumen Anda, Anda harus memastikan bahwa lebar elemen induk juga ditentukan.