Padding CSS

Padding digunakan untuk membuat ruang di sekitar konten elemen, di dalam batas yang ditentukan.

Padding CSS

Properti padding CSS digunakan untuk menghasilkan ruang di sekitar konten elemen, di dalam batas yang ditentukan.

Dengan CSS, Anda memiliki kontrol penuh atas padding. Ada properti untuk mengatur padding untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).

Padding - Sisi Individu

CSS memiliki properti untuk menentukan padding untuk setiap sisi elemen:

• padding-top
• padding-right
• padding-bottom
• padding-left

Semua properti padding dapat memiliki nilai berikut:

• length - menentukan padding dalam px, pt, cm, dll.
• % - menentukan padding dalam % lebar elemen yang memuatnya
• inherit - menentukan bahwa padding harus diwarisi dari elemen induk

Catatan: Nilai negatif tidak diperbolehkan.

Contoh

Mengatur padding yang berbeda untuk keempat sisi elemen <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding - Properti Shorthand

Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti padding dalam satu properti.

Properti padding adalah properti singkatan untuk sifat padding individu berikut:

• padding-top
• padding-right
• padding-bottom
• padding-left

Jadi, inilah cara kerjanya:

Jika properti padding memiliki empat nilai:

• padding: 25px 50px 75px 100px;
• padding atas adalah 25px
• padding kanan adalah 50px
• padding bawah adalah 75px
• padding kiri adalah 100px

Contoh

Menggunakan properti padding shorthand dengan empat nilai:

div {
  padding: 25px 50px 75px 100px;
}

Jika properti padding memiliki tiga nilai:

• padding: 25px 50px 75px;
• padding atas adalah 25px
• paddings kanan dan kiri berukuran 50px
• padding bawah adalah 75px

Contoh

Menggunakan properti padding shorthand dengan tiga nilai:

div {
  padding: 25px 50px 75px;
}

Jika properti padding memiliki dua nilai:

• padding: 25px 50px;
• padding atas dan bawah adalah 25px
• padding kanan dan kiri berukuran 50px

Contoh

Menggunakan properti padding shorthand dengan dua nilai:

div {
  padding: 25px 50px;
}

Jika properti padding memiliki satu nilai:

• padding: 25px;
• keempat padding berukuran 25px

Contoh

Menggunakan properti singkatan padding dengan satu nilai:

div {
  padding: 25px;
}

Padding dan Lebar Elemen

Properti width CSS menentukan lebar area konten elemen. Area konten adalah bagian di dalam padding, border, dan margin elemen (model kotak).

Jadi, jika sebuah elemen memiliki lebar yang ditentukan, padding yang ditambahkan ke elemen tersebut akan ditambahkan ke total lebar elemen tersebut. Ini seringkali merupakan hasil yang tidak diinginkan.

Contoh

Di sini, elemen <div> diberi lebar 300px. Namun, lebar sebenarnya dari elemen <div> adalah 350px (300px + 25px padding kiri + 25px padding kanan):

div {
  width: 300px;
  padding: 25px;
}

Untuk menjaga lebarnya pada 300px, berapa pun jumlah paddingnya, Anda dapat menggunakan properti box-sizing. Ini menyebabkan elemen mempertahankan lebarnya, jika Anda menambah padding, ruang konten yang tersedia akan berkurang.

Contoh

Menggunakan properti box-sizing untuk menjaga lebar pada 300px, berapa pun jumlah paddingnya:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Sumber referensi: w3schools.com