CSS Padding

Padding adalah ruang di dalam batas elemen yang digunakan untuk memberikan jarak antara konten elemen dan batasnya. Anda dapat mengatur padding pada elemen menggunakan properti CSS padding.

1. Menambahkan Padding Sederhana (padding)

Dengan properti padding, Anda dapat menambahkan padding pada semua sisi elemen sekaligus.

div {
  padding: 20px;
}

2. Menggunakan Padding untuk Setiap Sisi

Anda bisa mengatur padding secara individual untuk setiap sisi elemen: atas (top), kanan (right), bawah (bottom), dan kiri (left).

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

3. Menggunakan Padding Shorthand

Untuk menyingkat penulisan padding di CSS, Anda bisa menggunakan shorthand, yaitu memberikan nilai padding dalam urutan top right bottom left.

div {
  padding: 10px 20px 30px 40px;
}

4. Menggunakan Padding Auto

Padding tidak bisa diatur menggunakan auto seperti margin, namun Anda bisa menggunakan padding dalam kombinasi dengan lebar dan tinggi tetap untuk memberikan ruang di dalam elemen.

div {
  width: 50%;
  padding: 20px;
}

5. Padding dengan Nilai Persentase

Padding juga bisa menggunakan nilai persentase, yang dihitung berdasarkan lebar elemen induk.

div {
  padding: 10%;
}

Ringkasan Properti CSS Padding