属性 CSS padding
- halaman sebelumnya overscroll-behavior-y
- Halaman berikutnya padding-block
Definisi dan penggunaan
Properti singkat padding menetapkan semua properti marjin dalam satu deklarasi.
Pengertian
Properti singkat ini menetapkan lebar marjin semua elemen, atau menetapkan lebar marjin setiap sisi. Marjin yang diatur di elemen non-ganti teks dalam baris dalam tidak akan mempengaruhi perhitungan tinggi baris; oleh karena itu, jika sebuah elemen memiliki marjin dan latar belakang, dari sudut pandang visual dapat meluas ke baris lain, mungkin masih akan berpotensi menyanggupi konten lain. Latar belakang elemen akan meluas melalui marjin. Tidak diizinkan untuk menentukan nilai marjin negatif.
Keterangan:Tidak diizinkan untuk menggunakan nilai negatif.
Contoh 1
padding:10px 5px 15px 20px;
- Marjin atas adalah 10px
- Marjin kanan adalah 5px
- Marjin bawah adalah 15px
- Marjin kiri adalah 20px
Contoh 2
padding:10px 5px 15px;
- Marjin atas adalah 10px
- Marjin kanan dan kiri adalah 5px
- Marjin bawah adalah 15px
Contoh 3
padding:10px 5px;
- Marjin atas dan bawah adalah 10px
- Marjin kanan dan kiri adalah 5px
Contoh 4
padding:10px;
- Semua empat marjin adalah 10px
Lihat juga:
Panduan pelajaran CSS:Batas luar CSS
Panduan referensi HTML DOM:Properti padding
Syarat CSS
padding: length|initial|inherit;
Nilai properti
Nilai | Deskripsi |
---|---|
auto | Browser menghitung marjin. |
length | Ditetapkan nilai marjin dalam unit yang konkrit, seperti piksel, sentimeter, dll. Nilai baku adalah 0px. |
% | Ditetapkan marjin dalam persen dari lebar elemen induk. |
inherit | Ditetapkan supaya marjin dari elemen induk diwarisi. |
Detil teknis
Nilai baku: | 0 |
---|---|
Inheritsi: | tidak |
Versi: | CSS1 |
Syarat JavaScript: | object.style.padding="10px 5px" |
Contoh TIY
- Semua properti marjin dalam satu deklarasi
- Contoh ini menunjukkan penggunaan properti singkat untuk mengatur semua properti marjin dalam satu deklarasi, yang dapat memiliki satu hingga empat nilai.
Dukungan browser
Angka di dalam tabel menunjukkan versi pertama browser yang mendukung sifat ini sepenuhnya.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- halaman sebelumnya overscroll-behavior-y
- Halaman berikutnya padding-block