Padding CSS adalah salah satu sifat model kotak CSS . Ciri-ciri ini menetapkan padding di sekeliling keempat sisi elemen HTML. Padding CSS boleh digunakan untuk hampir setiap tag HTML (kecuali untuk beberapa tag jadual). Di samping itu, kesemua empat elemen boleh mempunyai nilai yang berbeza.
CSS Padding Property
Untuk menggunakan harta pad kekunci CSS, anda boleh menggunakan "TRouBLe" mnemonik (atau "TRiBbLe" untuk anda peminat Star Trek). Ini bermaksud bahagian atas , kanan , bawah , dan kiri , dan merujuk kepada urutan lebar padding yang anda tetapkan dalam harta pendek. Sebagai contoh:
padding: sebelah kanan kanan kiri; padding: 1px 2px 3px 6px;Jika anda menggunakan nilai-nilai yang disenaraikan di atas, ia akan memohon nilai padding yang berbeza untuk setiap sisi apa sahaja elemen HTML yang anda gunakan untuknya. Jika anda ingin menggunakan padding yang sama ke semua empat sisi, anda boleh menyederhanakan CSS anda dan hanya menulis satu nilai:
padding: 12px;Dengan garis CSS tersebut, 12 piksel padding akan digunakan untuk semua 4 sisi elemen.
Jika anda mahu padding menjadi sama untuk bahagian atas dan bawah dan kiri dan kanan, anda boleh menulis dua nilai:
padding: 24px 48px;Nilai pertama (24px) akan dikenakan ke bahagian atas dan bawah, manakala yang kedua akan dikenakan ke kiri dan kanan.
Jika anda menulis tiga nilai, itu akan menjadikan padding mendatar (kiri dan kanan) sama, semasa menukar bahagian atas dan bawah:
padding: bahagian bawah kanan dan kiri; padding: 0px 1px 3px;Menurut model kotak CSS, padding paling dekat dengan elemen / kandungan itu sendiri. Ini bermakna padding ditambahkan pada elemen di antara lebar atau ketinggian kandungan dan sebarang nilai sempadan yang anda gunakan. Jika padding ditetapkan kepada sifar, maka ia mempunyai kelebihan yang sama dengan kandungannya.
Nilai Padding CSS
Padding CSS boleh mengambil nilai panjang bukan negatif. Pastikan untuk menentukan ukuran, seperti px atau em. Anda juga boleh menentukan peratusan untuk padding anda, yang akan menjadi peratusan lebar blok mengandungi elemen. Ini termasuk padding atas dan bawah. Sebagai contoh:
#container {width: 800px; ketinggian: 200px; } #container p {width: 400px; ketinggian: 75%; padding: 25% 0; }Ketinggian perenggan di dalam elemen #container akan menjadi 75% ketinggian # kontainer ditambah 25% lebar untuk padding atas dan 25% lebar untuk padding bawah. Ini berjumlah 300 + 200 + 200 = 700px.
Kesan Menambah Padding CSS
Pada elemen peringkat blok , padding digunakan pada empat sisi. Kerana elemen itu adalah blok atau kotak sudah, padding digunakan pada sisi kotak.
Apabila padding CSS ditambah kepada unsur inline , mungkin terdapat beberapa unsur yang bertindih di atas dan di bawah elemen inline jika padding menegak melebihi ketinggian baris, tetapi ia tidak akan menolak ketinggian baris ke bawah. Padding CSS mendatar yang digunakan untuk unsur dalam baris akan ditambah ke permulaan unsur dan akhir elemen. Dan padding boleh membalut garis. Tetapi ia tidak akan terpakai kepada semua baris unsur pelbagai baris, jadi anda tidak boleh menggunakan padding untuk menginden segmen kandungan sebaris berbilang baris.
Selain itu, dalam CSS2.1, anda tidak boleh membuat blok kontena di mana lebar bergantung kepada elemen dengan peratusan untuk lebar (atau padding width). Jika anda membuat keputusan itu tidak dapat ditentukan. Penyemak imbas masih akan memaparkan kandungan, tetapi anda mungkin tidak mendapat hasil yang anda harapkan. Jika anda berfikir mengenainya, masuk akal, seolah-olah elemen kontena anda perlu mengetahui lebar unsur-unsur anaknya untuk menentukan lebarnya-seperti ketika ia tidak mempunyai lebar yang telah ditetapkan, dan satu atau lebih memiliki set lebar sebagai peratusan elemen kontena, ini menubuhkan rantaian pekeliling tanpa jawapan. Jika anda menggunakan peratusan untuk lebar apa-apa pada dokumen anda, anda harus memastikan bahawa lebar elemen ibu bapa juga ditentukan.