Codingku

padding

Properti padding adalah properti singkatan untuk mengatur empat properti padding: padding-top, padding-right, padding-bottom, dan padding-left dalam satu deklarasi.

Properti ini digunakan untuk menentukan bagian terdalam dari box model (model kotak), menciptakan ruang di sekitar konten elemen, di dalam margin atau batas yang di tentukan.

Nilai padding ditetapkan menggunakan panjang atau persentase, dan tidak dapat menerima nilai negatif.

Nilai awal (default) untuk semua properti padding adalah 0.

Setiap elemen pada halaman web adalah persegi panjang.

Dan setiap elemen memiliki model kotak persegi panjang yang menggambarkan area yang di hasilkan untuk elemen, yaitu: content box, padding box, border-box, dan margin box.

Content box ada pada setiap elemen. Sedangkan padding, border, dan margin box merupakan opsional yang keberadaannya tergantung pada layout desain halaman web yang dibuat oleh web developer.

Model kotak elemen dalam CSS — termasuk area konten, padding, border, dan margin

Model kotak elemen dalam CSS — termasuk area konten, padding, border, dan margin.

CSS Syntax

padding: length | initial | inherit;

JavaScript Syntax

object.style.padding="100px 20px"
Default value:0
Inherited:tidak
Animatable:ya Read about animatable
Version:CSS1

Attribute Value

default padding: 0;

Hapus semua padding

padding: 30px;

Saat menggunakan 1 nilai, padding diatur untuk semua/4 sisi.

padding: 30px 60px;

Saat menggunakan 2 nilai:

  • nilai pertama untuk atas/bawah
  • nilai kedua untuk kanan/kiri

Untuk mengingat urutan, pikirkan tentang nilai-nilai yang belum kamu tetapkan.

Jika kamu memasukkan 2 nilai (atas/kanan), kamu mengabaikan pengaturan bagian bawah dan kiri.

Karena bottom (bawah) adalah rekanan vertikal atas, maka akan menggunakan nilai top (atas).

Dan karena kiri adalah padanan horizontal kanan, itu akan menggunakan nilai kanan.

padding: 30px 60px 45px;

Saat menggunakan 3 nilai:

  • nilai pertama untuk atas
  • nilai kedua untuk kanan/kiri
  • nilai ketiga untuk bawah

Untuk mengingat urutan, pikirkan tentang nilai-nilai yang belum kamu tetapkan.

Jika kamu memasukkan 3 nilai (atas/kanan/bawah), kamu mengabaikan pengaturan kiri. Sebagai rekanan yang tepat, itu akan menggunakan nilainya.

padding: 30px 60px 45px 85px;

Saat menggunakan 4 nilai:

  • nilai pertama untuk atas
  • nilai kedua untuk kanan
  • nilai ketiga untuk bawah
  • nilai keempat untuk kiri

Untuk mengingat urutannya, mulailah dari atas dan lanjutkan searah jarum jam.