Properti padding CSS

Definisi dan penggunaan

Atribut padding singkat menata semua properti marjin dalam satu deklarasi.

Pengertian

Atribut singkat ini menata lebar marjin semua elemen, atau menata lebar marjin setiap sisi. Marjin elemen non-ganti yang diset di dalam teks baris akan mempengaruhi perhitungan tinggi baris; sehingga, jika elemen memiliki marjin dan latar belakang, dari sudut pandang visual dapat meluas ke baris lain, mungkin bahkan menimbulkan tabrakan dengan konten lain. Latar belakang elemen akan meluas melintasi 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 4 marjin adalah 10px

Lihat juga:

Panduan pelajaran CSS:Margin dalam CSS

Panduan referensi DOM HTML:Atribut padding

Contoh

Atur 4 marjin elemen p:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

Coba sendiri

Syarat CSS

padding: length|initial|inherit;

Nilai atribut

Nilai Deskripsi
auto Browser menghitung marjin.
length Ditetapkan nilai marjin dengan satuan konkrit, seperti pixel, sentimeter, dll. Nilai standar adalah 0px.
% Ditetapkan marjin berdasarkan persentase lebar elemen induk.
inherit Ditetapkan bahwa marjin harus dipindahkan dari elemen induk.

Detil teknis

Nilai standar: 0
Inheritsi: no
Versi: CSS1
Syarat JavaScript: object.style.padding="10px 5px"

Contoh TIY

Semua properti marjin dalam satu deklarasi
Contoh ini menunjukkan penggunaan atribut singkat untuk mengatur semua properti marjin dalam satu deklarasi, yang dapat ada satu hingga empat nilai.

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung atribut ini penuh.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5