Padding: Jarak Dalam

Padding: napas di dalam kotak

padding memberi jarak antara content dan border. Background elemen ikut meluas ke area padding, jadi padding terasa seperti "napas" berwarna di dalam kotak.

.tombol {
  padding: 12px 24px; /* vertikal 12px, horizontal 24px */
}

Shorthand-nya persis sama dengan margin: 1 nilai (semua sisi), 2 nilai (vertikal|horizontal), 3 nilai (atas|horizontal|bawah), 4 nilai (searah jarum jam).

Padding vs margin: kapan pakai apa?

Aturan praktisnya:

• Padding kalau jaraknya harus ikut background/warna elemen (bagian "dalam" komponen).
• Margin kalau jaraknya antar komponen yang terpisah (bagian "luar").

Contoh: tombol butuh padding (area klik berwarna), kartu butuh margin antar kartu.

/* SALAH: tombol dengan margin = area klik kecil, warna tidak ikut */
.tombol { margin: 12px 24px; }

/* BENAR: tombol dengan padding = area klik besar */
.tombol { padding: 12px 24px; }

Catatan teknis: tidak seperti margin, padding tidak pernah collapse dan tidak boleh negatif. padding: -10px tidak valid dan diabaikan browser.

Padding dan box-sizing

Ingat modul box-model: dengan box-sizing: border-box, padding "memakan" ruang di dalam width yang ditentukan. Tanpa itu, padding menambah lebar total dan merusak layout kolom.

Analogi: bubble wrap

Padding adalah bubble wrap: jarak antara barang (content) dan kardus (border). Makin tebal bubble wrap, makin besar paketnya (kecuali border-box, di mana paketnya tetap dan barangnya yang mengecil).

KENAPA padding penting: tanpa padding, teks menempel ke border dan terlihat sesak. Padding memberi "ruang napas" yang membuat desain terlihat profesional. Perhatikan tombol yang bagus vs jelek: bedanya hampir selalu padding.

Contoh bertahap: tombol

Tanpa padding (sesak):

.tombol {
  background: #38bdf8;
  color: white;
  border: none;
}

Teks menempel ke tepi, terlihat murahan. Dengan padding (lega):

.tombol {
  background: #38bdf8;
  color: white;
  border: none;
  padding: 12px 24px; /* vertikal 12px, horizontal 24px */
  border-radius: 8px;
}

Pola padding tombol yang umum: vertikal lebih kecil dari horizontal (12px 24px), karena teks sudah punya tinggi baris sendiri.

Level lanjut: padding proporsional dengan em.

.tombol {
  font-size: 1rem;
  padding: 0.75em 1.5em; /* mengikuti ukuran font tombol */
}

.tombol-besar {
  font-size: 1.25rem; /* padding ikut membesar otomatis! */
}

Dengan em, satu perubahan font-size memperbesar seluruh tombol secara proporsional.

Kesalahan umum pemula

Salah: padding persen mengacu ke LEBAR induk. padding-top: 10% = 10% dari lebar induk, bukan tinggi! Ini mengejutkan tapi berguna untuk trik rasio aspek (misal kotak video 16:9 dengan padding-top: 56.25%).

Salah: padding pada elemen inline. Padding kiri-kanan inline bekerja, tapi padding atas-bawah "bocor" menimpa baris lain tanpa mendorongnya (lihat modul display). Untuk badge/pill, pakai inline-block.

Salah: mengganti gap dengan padding. Di flexbox/grid, jarak antar item = gap. Padding untuk jarak dalam tiap item. Tertukar membuat tepi tidak rata.

Latihan kilat

1. Tulis padding tombol: vertikal 10px, horizontal 24px, dalam satu baris.
2. Tombol dengan font-size: 1rem; padding: 0.75em 1.5em;. Jika font-size diubah ke 1.5rem, berapa paddingnya sekarang (dalam px)?
3. padding-top: 56.25% pada wadah video berarti apa? Kenapa persen padding mengacu ke lebar?

Kunci: (1) padding: 10px 24px;. (2) 18px vertikal, 36px horizontal (em mengikuti font-size elemen sendiri). (3) Tinggi = 56.25% dari LEBAR wadah (rasio 16:9); spesifikasi CSS menetapkan persen padding terhadap lebar induk agar konsisten.

Istilah kunci

• Padding: ruang napas di DALAM kotak (antara konten dan border).
• Shorthand 2 nilai: padding: vertikal horizontal;.
• Shorthand 4 nilai: urutan jam: atas, kanan, bawah, kiri.
• em: satuan relatif terhadap font-size elemen sendiri.
• Persen padding: selalu mengacu ke LEBAR induk, bukan tinggi.

Rumus padding tombol siap pakai

/* Tombol kecil */ .btn-sm { padding: 8px 16px; font-size: 0.875rem; }
/* Tombol normal */ .btn { padding: 12px 24px; font-size: 1rem; }
/* Tombol besar */ .btn-lg { padding: 16px 32px; font-size: 1.125rem; }

Tiga ukuran dengan rasio konsisten (vertikal selalu setengah horizontal). Satu sistem, seluruh situs konsisten.

Rangkuman

Padding = jarak dalam yang ikut background. Shorthand sama dengan margin. Pilih padding untuk ruang dalam komponen, margin untuk jarak antar komponen.