Padding CSS adalah salah satu properti dari model kotak CSS. Properti singkatan ini mengatur padding di sekitar keempat sisi elemen HTML. Padding CSS dapat diterapkan ke hampir semua tag HTML (kecuali untuk beberapa tag tabel). Selain itu, keempat sisi elemen dapat memiliki nilai yang berbeda.
Properti Bantalan CSS
Untuk menggunakan properti padding CSS singkatan, Anda dapat menggunakan mnemonik “TrouBLe” (atau “TRIBbLe” untuk Anda penggemar Star Trek). Ini singkatan dari puncak, Baik, bawah, dan kiri, dan mengacu pada urutan lebar padding yang Anda atur di properti steno. Sebagai contoh:
padding: kanan atas kiri bawah;
bantalan: 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 ke keempat sisi, Anda dapat menyederhanakan simplify CSS dan cukup tulis satu nilai:
bantalan: 12px;
Dengan baris CSS itu, padding 12 piksel akan diterapkan ke keempat sisi elemen.
Jika Anda ingin padding sama untuk bagian atas dan bawah dan kiri dan kanan, Anda dapat menulis dua nilai:
bantalan: 24px 48px;
Nilai pertama (24px) akan berlaku untuk bagian atas dan bawah, sedangkan yang kedua akan berlaku untuk kiri dan kanan.
Jika Anda menulis tiga nilai, itu akan membuat padding horizontal (kiri dan kanan) sama, sambil mengubah bagian atas dan bawah:
padding: atas kanan dan kiri bawah;
bantalan: 0px 1px 3px;
Menurut model kotak CSS, padding paling dekat dengan elemen/konten itu sendiri. Ini berarti padding ditambahkan ke elemen di antara lebar atau tinggi konten dan nilai batas apa pun yang Anda gunakan. Jika padding diatur ke nol, maka ia memiliki tepi yang sama dengan konten.
Nilai Padding CSS
Padding CSS dapat mengambil nilai panjang non-negatif apa pun. Pastikan untuk menentukan pengukuran, seperti px atau em. Anda juga dapat menentukan persentase untuk padding Anda, yang akan menjadi persentase dari lebar blok yang mengandung elemen. Ini termasuk bantalan atas dan bawah. Sebagai contoh:
#container { lebar: 800px; tinggi: 200 piksel; }
#container p { lebar: 400px; tinggi: 75%; bantalan: 25% 0; }
Itu tinggi paragraf di dalam #wadah elemen akan menjadi 75% dari #wadah's tinggi ditambah 25% dari lebar untuk padding atas dan 25% dari lebar untuk padding bawah. Ini total 300 + 200 + 200 = 700px.
Efek Menambahkan Padding CSS
Di elemen tingkat blok, padding diterapkan di empat sisi. Karena elemennya sudah berupa balok atau kotak, padding diterapkan ke sisi kotak.
Saat bantalan CSS ditambahkan ke elemen sebaris, mungkin ada beberapa elemen yang tumpang tindih di atas dan di bawah elemen sebaris jika bantalan vertikal melebihi tinggi garis, tetapi tidak akan mendorong tinggi garis ke bawah. Padding CSS horizontal yang diterapkan ke elemen sebaris akan ditambahkan ke awal elemen dan akhir elemen. Dan padding dapat membungkus garis. Tapi itu tidak akan berlaku untuk semua baris elemen multi-baris, jadi Anda tidak dapat menggunakan padding untuk membuat indentasi segmen konten sebaris multi-baris.
Selain itu, di CSS2.1, Anda tidak dapat membuat blok penampung yang lebarnya bergantung pada elemen dengan persentase untuk lebar (atau lebar bantalan). Jika Anda melakukan hasilnya tidak terdefinisi. Browser akan tetap menampilkan konten, tetapi Anda mungkin tidak mendapatkan hasil yang Anda harapkan. Jika Anda memikirkannya, masuk akal, seolah-olah elemen wadah Anda perlu mengetahui lebar elemen turunannya untuk menentukan lebarnya — seperti ketika tidak memiliki lebar yang telah ditentukan sebelumnya, dan satu atau lebih memiliki lebar yang ditetapkan sebagai persentase dari elemen penampung, ini membuat rantai melingkar tanpa menjawab. Jika Anda menggunakan persentase untuk lebar apa pun di dokumen Anda, Anda harus memastikan bahwa lebar elemen induk juga ditentukan.