Pembalut - Trik CSS | CSS Almanac 2025

The paddingharta di CSS mentakrifkan bahagian yang paling dalam model kotak, mewujudkan ruang di sekeliling kandungan elemen itu, di dalam mana-mana margin dan / atau sempadan ditakrifkan.

Nilai padding ditetapkan menggunakan panjang atau peratusan, dan tidak dapat menerima nilai negatif. Nilai awal, atau lalai untuk semua sifat padding adalah 0.

Inilah contoh mudah:

.box ( padding: 0 1.5em 0 1.5em; )

Contoh di atas adalah menggunakan sifat paddingsingkatan, yang menerima hingga empat nilai, ditunjukkan di sini:

.box ( padding: || || || )

Sekiranya kurang dari empat nilai ditetapkan, nilai yang hilang diasumsikan berdasarkan nilai yang ditentukan. Sebagai contoh, dua set peraturan berikut akan mendapat hasil yang serupa:

.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )

Oleh itu, jika hanya satu nilai yang ditentukan, ini menetapkan keempat-empat sifat padding ke nilai yang sama:

.box ( padding: 20px; )

Sekiranya tiga nilai dinyatakan, itu adalah padding: (top) (left-and-right) (bottom);.

Mana-mana sifat padding individu boleh dinyatakan menggunakan longhand, dalam hal ini anda akan menentukan hanya satu nilai per properti. Oleh itu, contoh sebelumnya boleh ditulis semula seperti berikut:

.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )

Pengiraan Lebar Padding dan Unsur

Sekiranya elemen mempunyai lebar yang ditentukan, padding yang ditambahkan ke elemen tersebut akan menambah lebar keseluruhan elemen. Ini selalunya merupakan hasil yang tidak diingini, kerana ia memerlukan lebar elemen dikira semula setiap kali pelapik disesuaikan. (Perhatikan bahawa ini juga terjadi dengan ketinggian, tetapi dalam kebanyakan kasus lebih disukai untuk tidak memberikan elemen set ketinggian.)

Sebagai contoh:

.box ( padding: 20px; width: 400px; )

Dalam contoh ini, walaupun .boxelemen diberi lebar eksplisit 400px, lebar elemen yang diberikan pada halaman akan menjadi 440px. Ini mengambil kira bukan hanya lebar 400px, tetapi juga 20px padding kiri dan 20px padding kanan (ditakrifkan dengan padding shorthand dalam contoh sebelumnya).

Ini berlaku untuk mengekalkan 400px ruang kandungan, dan bukannya 400px dari keseluruhan lebar elemen. Inilah Pen yang menunjukkan ini:

Lihat Pen ini!

Ini berlaku di semua penyemak imbas yang sedang digunakan, dalam mod standard, tetapi tidak akan berlaku di IE6 dan IE7 dalam mod quirks (iaitu, di halaman yang dipaparkan di IE6 atau IE7 di mana tidak adaypeype yang diisytiharkan atau di mana sesuatu yang lain terjadi untuk mencetuskan kebiasaan mod).

Untuk menyelesaikan masalah ini, dengan mengekalkan lebar 400px tidak kira jumlah padding, anda boleh menggunakan box-sizingharta tanah:

.box ( padding: 20px; width: 400px; box-sizing: border-box; )

Ini menyebabkan elemen mengekalkan lebarnya sambil meningkatkan pelapisan, sehingga mengurangi ruang konten yang tersedia. Berikut adalah demonstrasi: