HTML Tingkat Lanjut
Belajar Padding

oleh: Suryo Adhy Chandra, ST

1. Apa itu Padding?

Padding adalah jarak antara konten di dalam elemen dengan batas (border) elemen itu sendiri. Bayangkan sebuah kotak hadiah — padding adalah busa / bantalan di dalam kotak yang melindungi isi dari tepinya.

Ilustrasi sederhana:

Konten

↑ Tanpa padding: konten langsung menempel ke border

Konten

↑ Dengan padding 24px: ada ruang kosong antara konten dan border

2. Mengapa Menggunakan Padding?

Padding digunakan karena beberapa alasan penting:

  • Keterbacaan — Teks yang terlalu mepet ke border terlihat sesak dan sulit dibaca. Padding memberi "ruang napas" pada konten.
  • Estetika — Elemen dengan padding terlihat lebih rapi dan profesional.
  • Klik yang nyaman — Tombol (<button>) dengan padding lebih lebar lebih mudah diklik, terutama di layar sentuh.
  • Kontrol ukuran — Padding memperbesar area elemen tanpa mengubah margin atau posisi elemen lain.

TANPA PADDING — terlihat sesak:

Ini adalah sebuah paragraf teks di dalam sebuah div. Tanpa padding teks langsung menempel ke tepi.

Tombol

DENGAN PADDING — lebih nyaman:

Ini adalah sebuah paragraf teks di dalam sebuah div. Dengan padding teks memiliki ruang yang nyaman.

Tombol

3. Cara Penulisan Padding

Ada beberapa cara menulis padding dalam CSS:

Penulisan Artinya
padding: 20px; Semua sisi (atas, kanan, bawah, kiri) = 20px
padding: 10px 30px; Atas & bawah = 10px, Kiri & kanan = 30px
padding: 5px 10px 15px 20px; Atas = 5px, Kanan = 10px, Bawah = 15px, Kiri = 20px
padding-top: 10px; Hanya sisi atas
padding-right: 10px; Hanya sisi kanan
padding-bottom: 10px; Hanya sisi bawah
padding-left: 10px; Hanya sisi kiri
/* Cara 1: semua sisi sama */ div { padding: 20px; } /* Cara 2: atas-bawah | kiri-kanan */ div { padding: 10px 30px; } /* Cara 3: atas | kanan | bawah | kiri (searah jarum jam) */ div { padding: 5px 10px 15px 20px; } /* Cara 4: per sisi */ div { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }

4. Contoh Pemakaian Padding

Contoh 1 — Perbandingan nilai padding berbeda:

padding: 0
padding: 8px
padding: 16px
padding: 32px

Contoh 2 — Padding berbeda per sisi:

div { padding-top: 30px; /* banyak ruang di atas */ padding-right: 10px; padding-bottom: 5px; /* sedikit ruang di bawah */ padding-left: 50px; /* banyak ruang di kiri */ }
Perhatikan ruang yang berbeda di setiap sisi kotak ini!

Contoh 3 — Membuat tombol dengan padding yang nyaman:

/* Tombol kecil */ .btn-kecil { padding: 4px 10px; } /* Tombol normal */ .btn-normal { padding: 8px 20px; } /* Tombol besar */ .btn-besar { padding: 14px 40px; }

Contoh 4 — Membuat kartu (card) dengan padding:

.kartu { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

padding: 4px

Isi kartu

padding: 16px

Isi kartu

padding: 24px

Isi kartu

Catatan penting:
  • Padding tidak bisa bernilai negatif (berbeda dengan margin)
  • Padding ikut mempengaruhi ukuran total elemen — elemen dengan padding lebih besar akan terlihat lebih besar
  • Background warna atau gambar pada elemen akan mengisi area padding juga

Yuk Coba Sendiri!

Coba salin dan tempel kode berikut, lalu ubah-ubah nilai paddingnya:

<style> .kotak-saya { background-color: #dbeafe; border: 2px solid #3b82f6; border-radius: 8px; padding: 20px; /* <-- coba ganti ini! */ } </style> <div class="kotak-saya"> Halo! Ini isi dari kotak saya. </div>
← Kembali Ke Daftar HTML Tingkat Lanjut