Padding adalah: Beda Padding dan Margin — CSS

Padding adalah ruang di dalam elemen, margin ruang di luarnya. Pelajari shorthand, satuan, dan kapan pakai yang mana lewat latihan interaktif.

Padding adalah ruang di dalam elemen, antara isinya dan garis tepinya (border). Makin besar padding, makin lega isinya, dan kotaknya ikut membesar. Warna background elemen ikut mewarnai padding, beda dengan margin yang ada di luar dan selalu transparan.

🧪 Tebakan cepat: teks di tombolmu nempel ke pinggir tombol. Yang perlu ditambah padding atau margin? Tebak dulu, jawabannya ada di bagian "Padding atau margin?".

Ruang di dalam tombol

<button class="btn">Beli sekarang</button>

<style>
.btn {
  background-color: lightblue;
  padding: 12px 24px;
}
</style>

.btn adalah selector: aturan di dalam { } berlaku buat elemen dengan class="btn".
padding adalah propertinya: ruang di dalam, antara teks "Beli sekarang" dan pinggir tombol.
12px 24px adalah dua nilai. Yang pertama buat atas dan bawah (12px), yang kedua buat kanan dan kiri (24px).

Hasilnya, tombol biru yang lebih besar, dengan teks di tengah dan ruang lega di sekelilingnya. Background-nya ikut mengisi padding, dan area padding itu juga ikut bisa diklik. Makanya tombol butuh padding biar gampang dipencet di HP.

Satu sampai empat nilai

padding: 10px;                /* semua sisi 10px */
padding: 10px 20px;           /* atas-bawah 10px, kanan-kiri 20px */
padding: 10px 20px 30px;      /* atas 10px, kanan-kiri 20px, bawah 30px */
padding: 10px 20px 30px 40px; /* atas, kanan, bawah, kiri */

Empat nilai dibaca searah jarum jam, mulai dari atas. Tiap sisi juga punya properti sendiri: padding-top, padding-right, padding-bottom dan padding-left. Jadi padding: 10px 20px sama persis dengan:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

Angkanya butuh satuan, misalnya px. Padding gak boleh negatif.

Padding bikin kotak lebih lebar

Kotak dengan width: 100px dan padding: 20px lebarnya di layar jadi 140px: 100 + 20 di kiri + 20 di kanan. Itu karena bawaan browser adalah box-sizing: content-box, yang bikin width cuma mengatur lebar isinya, lalu padding ditambahkan di luarnya. Mau lebarnya tetap 100px? Tambahkan box-sizing: border-box, supaya padding dihitung di dalam width.

Padding atau margin?

Butuh ruang di dalam kotak, antara isi dan pinggirnya? Pakai padding. Background dan area klik ikut membesar.
Butuh jarak di luar kotak, ke elemen tetangga? Pakai margin.

Jawaban tebakan: padding. Teksnya nempel ke pinggir tombol itu sendiri, jadi ruangnya ditambah di dalam. Kalau tombolnya yang terlalu dekat ke elemen lain, baru itu urusan margin.

⚠️ Jebakan yang sering ketemu

Urutan dua nilai terbalik. Di padding: 42px 24px, yang pertama selalu atas-bawah. padding: 24px 42px hasilnya kebalikannya.
Angka tanpa satuan. padding: 20 dibuang browser. Tulis 20px.
Padding ditaruh di elemen yang salah. Mau teks paragraf lega? Padding-nya di aturan p, bukan di induknya.

TL;DR: Padding adalah ruang di dalam elemen, antara isi dan border, dan background ikut mengisinya. padding bisa diisi satu sampai empat nilai: satu buat semua sisi, dua buat atas-bawah lalu kanan-kiri, empat buat atas, kanan, bawah, kiri (searah jarum jam). Dengan bawaan content-box, padding menambah lebar kotak di luar width. Ruang di dalam pakai padding, jarak ke tetangga pakai margin.