Properti padding

Properti padding mengatur padding internal elemen. Nilai properti dapat berupa unit untuk ukuran apa pun. Secara default, setiap browser dapat menambahkan berbagai padding ke elemen. Properti ini merupakan singkatan untuk properti padding-top, padding-right, padding-bottom, padding-left.

Sintaks

cssselektor {
  padding: nilai;
}

Properti padding menerima 1, 2, 3 atau 4 nilai, yang disebutkan dipisahkan oleh spasi:

Jumlah	Deskripsi
`1`	Satu nilai mengatur padding dari semua sisi elemen.
`2`	Nilai pertama mengatur padding atas dan bawah, dan nilai kedua - kanan dan kiri.
`3`	Nilai pertama mengatur padding atas, nilai kedua - kanan dan kiri, dan nilai ketiga - bawah.
`4`	Nilai pertama mengatur padding atas, nilai kedua - kanan, nilai ketiga - bawah, dan nilai keempat - kiri.

Dalam kasus ini, secara default padding internal akan nol dan teks akan menempel ke batas blok:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 0;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Dan sekarang mari kita buat padding internal sebesar 30px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Sekarang padding atas dan bawah akan 20px, dan kanan dan kiri - 5px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Sekarang padding atas 5px, kanan - 15px, bawah - 25px, kiri - 35px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат: