Padding adalah ruang atau jarak di bagian dalam sebuah elemen — antara konten elemen dengan tepi (border) elemen itu sendiri. Dalam bahasa Inggris, padding berarti “bantalan” atau “lapisan pengisi”, dan itu persis fungsinya di CSS: memberi ruang napas di sekeliling konten supaya teks atau gambar tidak menempel ke pinggir kotaknya. Bedanya dengan margin: margin adalah jarak di luar elemen — ruang yang memisahkan satu elemen dari elemen lain di sekitarnya.

Dua kalimat di atas sebenarnya sudah menjawab 80% kebingungan pemula. Tapi sisanya yang 20% — cara menulis shorthand padding: 10px 20px, kenapa elemen tiba-tiba membengkak setelah diberi padding, kapan harus pakai padding dan kapan margin, sampai kelakuan aneh padding di elemen inline — justru yang paling sering bikin layout berantakan di proyek nyata. Artikel ini membahas semuanya berurutan, lengkap dengan contoh kode yang bisa langsung kamu coba.

Padding Adalah… (Pengertian dan Fungsinya di CSS)

Padding adalah properti CSS yang mengatur jarak antara konten sebuah elemen dengan border (tepi) elemen tersebut. Padding selalu berada di dalam elemen, sehingga area padding ikut terkena warna atau gambar background elemen — inilah ciri visual paling gampang untuk mengenalinya. Fungsi utamanya: membuat konten tidak “sesak” menempel ke tepi kotaknya, memperbesar area klik tombol atau link, dan memberi proporsi visual yang nyaman dibaca.

Lihat contoh paling sederhana:

<p class="tanpa-padding">Teks ini menempel ke tepi kotak.</p>
<p class="dengan-padding">Teks ini punya ruang napas di sekelilingnya.</p>

.tanpa-padding {
  background: #dbeafe;
  border: 2px solid #3b82f6;
  padding: 0;
}
.dengan-padding {
  background: #dbeafe;
  border: 2px solid #3b82f6;
  padding: 16px; /* 16px jarak di keempat sisi, di DALAM border */
}

Kedua paragraf punya background dan border yang sama. Bedanya, pada .dengan-padding teks tidak menyentuh border karena ada bantalan 16px di antara konten dan tepi kotak. Perhatikan juga: area 16px itu ikut berwarna biru muda, karena padding masih bagian dari elemen — background elemen membentang sampai ke border, melewati area padding.

Dalam kerangka box model CSS, setiap elemen HTML dirender sebagai kotak berlapis dari dalam ke luar: konten → padding → border → margin. Padding adalah lapisan kedua, tepat setelah konten. Kalau konsep kotak berlapis ini masih terasa abstrak, lesson interaktif tentang padding di Hyper Sheets membahasnya dengan editor langsung di browser — kamu ubah nilainya, kotaknya berubah saat itu juga.

Satu catatan ejaan kecil tapi penting: penulisannya padding dengan dua huruf “d”. Typo pading (satu “d”) sangat umum — dan karena CSS tidak menampilkan pesan error, properti yang salah ketik hanya diabaikan diam-diam. Kita bahas lagi jebakan ini di bagian kesalahan umum.

Padding vs Margin: Apa Bedanya?

Perbedaan padding dan margin: padding adalah jarak di dalam elemen (antara konten dan border), sedangkan margin adalah jarak di luar elemen (antara border dan elemen tetangganya). Padding memperluas “isi” kotak dan ikut terkena background; margin murni ruang kosong transparan yang mendorong elemen lain menjauh. Keduanya sama-sama menciptakan “jarak”, tapi di sisi yang berlawanan dari border — dan dari situlah semua perbedaan perilakunya berasal.

Analogi yang paling gampang diingat: bayangkan kamu mengirim gelas keramik dalam kardus.

Padding = busa di dalam kardus. Ia mencegah gelas (konten) menyentuh dinding kardus (border). Makin tebal busanya, makin besar kardusnya — padahal gelasnya tetap sama.
Margin = jarak antar kardus di dalam mobil pengiriman. Ia mencegah kardus-kardus saling berbenturan. Jarak ini bukan bagian dari kardus mana pun; ia cuma ruang kosong di antaranya.

Sekarang versi tekniknya dalam tabel:

Aspek	Padding	Margin
Posisi	Di dalam elemen, antara konten dan border	Di luar elemen, antara border dan elemen lain
Background	Ikut terkena warna/gambar background elemen	Selalu transparan, memperlihatkan background parent
Ukuran elemen	Menambah ukuran total elemen (kecuali pakai `border-box`)	Tidak menambah ukuran elemen, hanya menggeser posisinya
Nilai negatif	Tidak boleh — nilai negatif dianggap tidak valid	Boleh — sering dipakai untuk menarik elemen mendekat
Nilai `auto`	Tidak berlaku	Berlaku — `margin: auto` klasik untuk centering
Margin collapse	Tidak pernah terjadi	Bisa terjadi (margin vertikal antar elemen block “melebur”)
Area klik/tap	Ikut memperluas area yang bisa diklik	Tidak — area klik berhenti di border

Baris terakhir itu sering diremehkan padahal berdampak langsung ke pengalaman pengguna: padding pada tombol atau link memperbesar area yang bisa disentuh jari, margin tidak. Ini alasan kenapa tombol yang nyaman dipencet di HP selalu dibuat dengan padding, bukan margin. Kalau kamu mau mendalami pasangan padding ini secara khusus, ada juga lesson terpisah tentang margin yang membahas margin collapse dan margin: auto lebih dalam.

Contoh visual perbedaannya:

.kotak-a {
  background: #fef3c7;
  padding: 24px;   /* area kuning membesar, konten menjauh dari tepi */
}
.kotak-b {
  background: #fef3c7;
  margin: 24px;    /* area kuning tetap, seluruh kotak menjauh dari tetangga */
}

Pada .kotak-a, area kuning ikut melebar 24px ke segala arah karena padding bagian dari elemen. Pada .kotak-b, area kuning tidak berubah sedikit pun — yang berubah hanya posisinya, terdorong 24px menjauh dari elemen di sekitarnya.

Cara Menulis Padding: Sintaks Lengkap dari 1 sampai 4 Nilai

Padding bisa ditulis dua cara: properti per sisi (padding-top, padding-right, padding-bottom, padding-left) atau shorthand padding dengan 1 sampai 4 nilai sekaligus. Urutan shorthand-nya selalu searah jarum jam mulai dari atas: atas → kanan → bawah → kiri. Hafalkan urutan ini sekali, dan kamu tidak akan pernah bingung lagi membaca kode CSS orang lain.

Properti Per Sisi

Empat properti terpisah, masing-masing mengatur satu sisi:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Cara ini paling eksplisit dan berguna kalau kamu hanya ingin mengubah satu sisi tanpa menyentuh sisi lain — misalnya menambah padding-bottom saja pada section yang diikuti footer:

.section-terakhir {
  padding-bottom: 64px; /* sisi lain tidak tersentuh */
}

Shorthand: 1, 2, 3, dan 4 Nilai

Empat baris di atas bisa diringkas jadi satu baris. Aturannya berdasarkan jumlah nilai:

/* 1 nilai: semua sisi sama */
.a { padding: 16px; }
/* atas=16, kanan=16, bawah=16, kiri=16 */

/* 2 nilai: [atas-bawah] [kiri-kanan] */
.b { padding: 10px 20px; }
/* atas=10, kanan=20, bawah=10, kiri=20 */

/* 3 nilai: [atas] [kiri-kanan] [bawah] */
.c { padding: 8px 16px 24px; }
/* atas=8, kanan=16, bawah=24, kiri=16 */

/* 4 nilai: [atas] [kanan] [bawah] [kiri] — searah jarum jam */
.d { padding: 4px 8px 12px 16px; }
/* atas=4, kanan=8, bawah=12, kiri=16 */

Yang paling sering kamu pakai sehari-hari adalah versi 2 nilai: padding: 10px 20px berarti 10px untuk atas-bawah dan 20px untuk kiri-kanan. Pola ini sangat umum di tombol, karena tombol biasanya butuh ruang horizontal lebih lebar daripada vertikal supaya proporsinya enak dilihat:

.tombol {
  padding: 12px 24px; /* pola klasik tombol: horizontal 2x vertikal */
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
}

Untuk versi 3 nilai, nilai tengah selalu mewakili kiri-kanan sekaligus — jarang dipakai, tapi kamu akan menemuinya di kode orang lain, jadi tetap perlu bisa membacanya.

Satuan yang Bisa Dipakai

Padding menerima hampir semua satuan panjang CSS:

.contoh {
  padding: 16px;      /* piksel — paling umum, presisi */
  padding: 1rem;      /* relatif ke font-size root, ramah aksesibilitas */
  padding: 1.5em;     /* relatif ke font-size elemen itu sendiri */
  padding: 5%;        /* relatif ke LEBAR parent (hati-hati!) */
}

Ada satu jebakan di satuan persen: padding dalam persen selalu dihitung dari lebar elemen parent — termasuk padding-top dan padding-bottom. Jadi padding-top: 10% bukan 10% dari tinggi parent, melainkan 10% dari lebarnya. Perilaku ini terasa aneh, tapi justru dimanfaatkan untuk trik menjaga rasio aspek kotak di era sebelum properti aspect-ratio ada. Untuk pemakaian normal, px dan rem adalah pilihan teraman.

Satu lagi yang perlu kamu tahu: padding tidak menerima nilai negatif. padding: -10px bukan menghasilkan efek “menarik konten keluar” — deklarasinya dianggap tidak valid dan diabaikan browser begitu saja. Kalau kamu butuh menarik elemen mendekat atau menumpuk, itu tugasnya margin negatif, bukan padding.

Padding dan Box Model: Kenapa Elemen Jadi Membengkak?

Secara default, padding ditambahkan di luar width dan height yang kamu tulis — sehingga ukuran total elemen membengkak setiap kali kamu menambah padding. Elemen dengan width: 300px dan padding: 20px sebenarnya menempati lebar 340px di layar (300 + 20 kiri + 20 kanan). Perilaku default ini bernama box-sizing: content-box, dan ia penyebab nomor satu layout “meledak” yang dialami pemula.

Mari lihat hitungannya:

.kartu {
  width: 300px;
  padding: 20px;
  border: 2px solid #334155;
}
/* Lebar total di layar:
   300 (konten) + 20 + 20 (padding) + 2 + 2 (border) = 344px */

Kamu menulis 300, browser menggambar 344. Di layout berdampingan — misalnya dua kolom yang masing-masing width: 50% plus padding — selisih ini cukup untuk membuat kolom kedua terlempar ke baris berikutnya.

Solusinya satu properti: box-sizing: border-box. Dengan nilai ini, width yang kamu tulis menjadi lebar total elemen — padding dan border dihitung ke dalam, bukan ditambahkan keluar:

.kartu {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #334155;
}
/* Lebar total di layar: tetap 300px.
   Ruang konten menyusut jadi 300 - 40 - 4 = 256px */

Karena perilaku ini jauh lebih intuitif, hampir semua proyek modern (termasuk framework seperti Tailwind dan kebanyakan CSS reset) memasangnya untuk semua elemen sejak baris pertama:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Kalau kamu memulai proyek dari nol, jadikan snippet di atas kebiasaan — ia menghilangkan satu kategori bug layout sekaligus. Hubungan width, padding, dan box-sizing ini kami bedah lebih tuntas di artikel width dan height adalah, dan untuk latihan menghitung ukuran kotaknya langkah demi langkah ada lesson box model di Hyper Sheets. Mau cara yang lebih visual? Coba playground box model interaktif — kamu geser nilai padding, margin, dan border, lalu melihat langsung lapisan mana yang membesar.

Kapan Pakai Padding, Kapan Pakai Margin?

Aturan praktisnya: pakai padding untuk ruang di dalam sebuah komponen (jarak konten ke tepinya sendiri), dan pakai margin atau gap untuk ruang antar komponen. Kalau jarak itu “milik” elemen ke dirinya sendiri — pakai padding. Kalau jarak itu hubungan antara dua elemen — pakai margin atau gap. Pertanyaan sederhananya: jarak ini bagian dari kotaknya, atau ruang kosong di antara kotak-kotak?

Beberapa kasus nyata supaya intuisinya terbentuk:

Tombol dan link → padding. Ruang di sekitar teks tombol adalah bagian dari tombol itu — ia harus ikut berwarna background dan ikut bisa diklik:

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #16a34a;
  color: white;
  border-radius: 8px;
}

Jarak antar card → margin atau gap. Ruang di antara card bukan milik card mana pun; ia hanya pemisah:

/* Cara klasik: margin */
.card + .card {
  margin-top: 16px;
}

/* Cara modern: gap pada container flex/grid */
.daftar-card {
  display: flex;
  flex-direction: column;
  gap: 16px; /* jarak antar card tanpa margin sisa di tepi */
}

Di layout modern, gap pada flex atau grid container sering jadi pilihan yang lebih bersih daripada margin, karena ia hanya memberi jarak di antara item — tidak ada sisa margin di tepi container yang harus dinolkan manual.

Isi card → padding. Ruang antara teks card dengan tepi card adalah urusan internal card:

.card {
  padding: 24px;          /* urusan internal: konten ke tepi */
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

Section halaman → padding untuk ruang internal, margin untuk pemisah antar section. Section landing page biasanya diberi padding: 64px 24px supaya kontennya bernapas, lalu jarak antar section diatur terpisah.

Kombinasi ketiganya dalam satu komponen terlihat seperti ini:

<div class="daftar-card">
  <article class="card">
    <h2>Judul Artikel</h2>
    <p>Ringkasan singkat artikel...</p>
    <a class="btn" href="#">Baca selengkapnya</a>
  </article>
  <article class="card">
    <h2>Artikel Kedua</h2>
    <p>Ringkasan lainnya...</p>
    <a class="btn" href="#">Baca selengkapnya</a>
  </article>
</div>

Padding di .card dan .btn (ruang internal), gap di .daftar-card (ruang antar komponen). Begitu kamu konsisten dengan pembagian peran ini, CSS-mu langsung jauh lebih gampang dirawat — mengubah jarak antar card tidak akan pernah merusak tampilan dalam card, dan sebaliknya.

Padding di Elemen Inline: Hati-hati Arah Vertikal

Pada elemen inline seperti span dan a, padding horizontal (kiri-kanan) bekerja normal mendorong konten di sampingnya, tapi padding vertikal (atas-bawah) tidak mendorong baris di atas dan bawahnya. Padding vertikalnya tetap digambar — background-nya melebar ke atas dan bawah — tapi tinggi baris tidak bertambah, sehingga hasilnya menimpa (overlap) baris teks di sekitarnya. Ini salah satu perilaku CSS yang paling sering membuat pemula mengira “padding-nya rusak”.

Coba sendiri:

<p>
  Ini baris pertama dengan teks yang cukup panjang.
  Di baris kedua ada <span class="sorot">kata yang disorot</span>
  dengan padding besar. Ini baris ketiga di bawahnya.
</p>

.sorot {
  background: #fde047;
  padding: 20px; /* horizontal: OK. vertikal: menimpa baris lain! */
}

Padding kiri-kanan 20px akan mendorong kata di sebelahnya dengan benar. Tapi padding atas-bawah hanya memperluas kotak kuningnya — baris pertama dan ketiga tidak bergeser sama sekali, sehingga kotak kuning itu menimpa teks di atas dan bawahnya.

Kenapa begitu? Karena tinggi baris teks ditentukan oleh line-height, dan elemen inline memang dirancang untuk mengalir di dalam baris tanpa mengganggu ritme vertikal paragraf. Solusinya: ubah elemen jadi inline-block, yang tetap mengalir dalam baris tapi menghormati padding vertikal:

.sorot {
  display: inline-block; /* padding vertikal kini mendorong layout */
  background: #fde047;
  padding: 8px 12px;
  border-radius: 6px;
}

Inilah alasan hampir semua tombol berbasis a (link yang didandani jadi tombol) selalu diberi display: inline-block — tanpa itu, padding: 12px 24px yang kamu tulis hanya bekerja setengah. Perbedaan perilaku inline, block, dan inline-block kami kupas tuntas di artikel inline adalah, dan kalau mau latihan langsung dengan preview, ada lesson display di Hyper Sheets yang membahas nilai-nilai display satu per satu.

Margin Collapse, Nilai Negatif, dan auto: Tiga Hal yang Tidak Berlaku untuk Padding

Tiga perilaku khas margin — margin collapse, nilai negatif, dan nilai auto — sama sekali tidak berlaku pada padding. Memahami ketiganya penting bukan hanya untuk margin, tapi justru supaya kamu tahu kapan padding adalah alat yang lebih bisa diprediksi. Mari bahas singkat satu per satu.

Pertama, margin collapse tidak terjadi pada padding. Kalau dua elemen block bertumpuk vertikal dan masing-masing punya margin-bottom: 24px dan margin-top: 16px, jarak di antara keduanya bukan 40px — melainkan 24px, karena kedua margin “melebur” (collapse) dan hanya nilai terbesar yang dipakai. Padding tidak pernah begitu: padding-bottom: 24px di elemen atas plus padding-top: 16px di elemen bawah menghasilkan ruang visual 40px, titik. Karena bisa diprediksi penuh, banyak developer memilih padding untuk mengatur ruang vertikal section halaman:

/* Jarak antar section yang selalu konsisten, bebas drama collapse */
.section {
  padding-top: 48px;
  padding-bottom: 48px;
}

Kedua, padding tidak bisa negatif. Margin negatif adalah teknik sah untuk menarik elemen mendekat atau membuat efek tumpang tindih (misalnya avatar yang menumpuk). Padding negatif tidak ada dalam spesifikasi — nilainya dianggap invalid dan seluruh deklarasi diabaikan:

.avatar-tumpuk {
  margin-left: -12px; /* valid: avatar saling menumpuk */
}
.salah {
  padding: -10px; /* invalid: diabaikan browser, tanpa error */
}

Ketiga, padding: auto tidak ada. margin: auto menyuruh browser membagi ruang kosong secara otomatis — resep klasik margin: 0 auto untuk menengahkan container. Padding tidak punya konsep serupa, karena padding bukan “ruang sisa yang dibagi”, melainkan nilai pasti yang kamu tentukan sendiri.

Kesimpulan praktisnya: padding itu membosankan — dan justru itu kelebihannya. Tidak ada collapse, tidak ada nilai negatif, tidak ada auto. Berapa yang kamu tulis, itu yang kamu dapat. Saat butuh jarak yang 100% bisa diprediksi, padding adalah pilihan yang aman.

Praktik: Membuat Card Profil dengan Padding yang Rapi

Cara paling cepat menginternalisasi padding adalah membangun satu komponen utuh dan memperhatikan peran setiap jaraknya. Kita akan membuat card profil sederhana — komponen yang muncul di hampir semua website — dan setiap keputusan padding vs margin-nya kita bedah. Kamu bisa mengetiknya di file HTML kosong dan membukanya langsung di browser.

Langkah 1: Struktur HTML

<div class="profil">
  <img class="avatar" src="avatar.jpg" alt="Foto profil Andi" />
  <h2 class="nama">Andi Pratama</h2>
  <p class="peran">Front-End Developer</p>
  <p class="bio">
    Suka membangun antarmuka yang rapi dan cepat.
    Sedang belajar CSS lebih dalam di BelajarWeb.dev.
  </p>
  <a class="tombol" href="#">Lihat Portofolio</a>
</div>

Langkah 2: Kerangka Card — Padding sebagai Ruang Internal

* {
  box-sizing: border-box; /* kebiasaan baik dari bagian box model tadi */
}

.profil {
  width: 320px;
  padding: 32px 24px;      /* ruang internal: vertikal 32, horizontal 24 */
  margin: 40px auto;       /* ruang eksternal + centering horizontal */
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: white;
}

Perhatikan pembagian perannya dalam satu selector: padding: 32px 24px mengatur seberapa jauh konten dari tepi card (urusan internal), sementara margin: 40px auto mengatur posisi card terhadap halaman (urusan eksternal) — 40px dari atas-bawah, auto kiri-kanan supaya card berada di tengah. Dua properti, dua dunia yang berbeda.

Berkat box-sizing: border-box, lebar card tetap 320px persis meskipun ada padding 24px kiri-kanan dan border 1px — tidak perlu kalkulator.

Langkah 3: Jarak Antar Elemen di Dalam Card — Margin

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.nama {
  margin: 16px 0 4px;  /* 16px dari avatar, 4px ke peran */
}
.peran {
  margin: 0 0 12px;
  color: #64748b;
}
.bio {
  margin: 0 0 20px;
  line-height: 1.6;
}

Jarak avatar-ke-nama, nama-ke-peran, dan bio-ke-tombol semuanya pakai margin — karena itu hubungan antar elemen, bukan ruang internal salah satu elemen.

Langkah 4: Tombol — Padding untuk Area Klik

.tombol {
  display: inline-block;   /* wajib: link itu inline! */
  padding: 12px 28px;      /* area klik luas dan nyaman disentuh */
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

Tiga pelajaran sekaligus di empat baris: display: inline-block supaya padding vertikal dihormati (ingat bagian elemen inline tadi), padding: 12px 28px dengan pola 2 nilai khas tombol, dan seluruh area padding itu bisa diklik — pengguna HP tidak perlu membidik teksnya dengan presisi.

Selesai. Coba sekarang bereksperimen: perbesar padding card jadi 48px, lalu perhatikan card terasa lebih “mewah”; kecilkan jadi 8px dan ia langsung terasa sesak. Ritme padding seperti ini adalah salah satu pembeda terbesar antara desain yang terlihat profesional dan yang terlihat asal jadi.

Kesalahan Umum Saat Menggunakan Padding

Kesalahan padding yang paling sering terjadi bukan soal sintaks, melainkan salah memilih alat: memakai margin ketika seharusnya padding, lupa box-sizing: border-box, dan typo penulisan yang diabaikan browser tanpa pesan error. Berikut daftar lengkapnya — kalau layout-mu bermasalah setelah bermain jarak, kemungkinan besar penyebabnya ada di sini.

1. Memakai Margin untuk Memperbesar Area Klik Tombol

Tombol kecil yang susah dipencet di HP tidak akan tertolong oleh margin — margin ada di luar border, jadi tidak ikut bisa diklik. Yang memperluas area klik adalah padding:

/* Salah: tombol tetap kecil, cuma tetangganya menjauh */
.btn { margin: 12px 24px; }

/* Benar: seluruh area padding bisa diklik */
.btn { padding: 12px 24px; }

Aturan praktis aksesibilitas: target sentuh yang nyaman berukuran sekitar 44px — dan cara mencapainya hampir selalu lewat padding.

2. Lupa border-box, Layout Meledak

Kamu memberi dua kolom width: 50% masing-masing, menambahkan padding: 16px, dan tiba-tiba kolom kedua jatuh ke baris bawah. Penyebabnya: dengan content-box default, padding ditambahkan ke 50% itu sehingga totalnya melebihi 100%. Pasang box-sizing: border-box di CSS reset dan masalah ini hilang selamanya.

3. Typo: pading, paddings, atau Salah Urutan Shorthand

CSS tidak melempar error. Kalau kamu menulis pading: 16px (kurang satu “d”) atau padings, browser hanya diam dan melewatinya — kamu bengong kenapa tidak ada perubahan. Selalu cek panel Styles di DevTools: properti yang salah ketik akan ditampilkan dicoret dengan ikon peringatan. Kesalahan sepupunya: lupa urutan shorthand dan menulis padding: 10px 20px sambil berharap 10px itu kiri-kanan — padahal nilai pertama selalu atas-bawah.

4. Memakai Padding untuk Jarak Antar Elemen

Memberi padding-bottom: 24px pada card supaya “berjarak” dari card di bawahnya memang terlihat berhasil — sampai card itu diberi background atau border, dan tiba-tiba area background-nya memanjang aneh ke bawah. Jarak antar elemen adalah wilayah margin atau gap; padding hanya untuk ruang internal. Simpan pembagian peran ini baik-baik.

5. Padding Persen yang Mengacu ke Lebar

padding-top: 10% dihitung dari lebar parent, bukan tingginya. Kalau kamu memakai persen untuk padding vertikal dan hasilnya “berubah-ubah sendiri” saat window di-resize horizontal, inilah biang keroknya. Untuk ruang vertikal yang stabil, pakai px atau rem.

6. Menimpa Shorthand Tanpa Sadar

Urutan deklarasi CSS itu penting. Kode ini tidak bekerja seperti harapan penulisnya:

.kotak {
  padding-left: 32px;  /* ditimpa baris di bawahnya! */
  padding: 16px;       /* shorthand me-reset SEMUA sisi jadi 16px */
}

Shorthand padding selalu menetapkan keempat sisi sekaligus — sisi yang tidak kamu sebut di-reset ke nilai shorthand-nya. Kalau ingin satu sisi berbeda, tulis shorthand dulu, baru properti per sisi di bawahnya.

FAQ Seputar Padding

Padding artinya apa?

Secara bahasa, padding berarti bantalan atau lapisan pengisi. Di CSS, padding adalah jarak di bagian dalam elemen — antara konten (teks, gambar) dengan border elemen itu sendiri. Area padding ikut terkena background elemen dan ikut memperluas area klik.

Apa bedanya padding dan margin?

Padding adalah jarak di dalam elemen (antara konten dan border), margin adalah jarak di luar elemen (antara border dan elemen lain). Padding ikut kena background dan menambah ukuran elemen; margin selalu transparan dan hanya menggeser posisi. Analogi: padding itu busa di dalam kardus, margin itu jarak antar kardus.

Apakah padding boleh bernilai negatif?

Tidak. Nilai negatif pada padding dianggap tidak valid dan deklarasinya diabaikan browser tanpa pesan error. Kalau kamu butuh menarik elemen mendekat atau membuat efek tumpang tindih, pakai margin negatif — margin memang boleh negatif.

padding: 10px 20px artinya apa?

Shorthand 2 nilai: nilai pertama (10px) untuk sisi atas dan bawah, nilai kedua (20px) untuk sisi kiri dan kanan. Jadi elemen mendapat bantalan 10px di atas-bawah dan 20px di kiri-kanan. Kalau nilainya empat (misalnya padding: 4px 8px 12px 16px), urutannya searah jarum jam: atas, kanan, bawah, kiri.

Kenapa elemen jadi lebih besar setelah diberi padding?

Karena default box-sizing: content-box menambahkan padding di luar width/height yang kamu tulis — elemen width: 300px dengan padding: 20px menempati 340px. Solusinya pasang box-sizing: border-box supaya padding dihitung ke dalam width, sehingga ukuran total tetap sesuai yang kamu tulis.

Bagaimana cara memberi padding hanya di satu sisi?

Pakai properti per sisi: padding-top, padding-right, padding-bottom, atau padding-left. Contoh: padding-left: 24px hanya memberi jarak di sisi kiri tanpa menyentuh sisi lain. Hati-hati urutan penulisannya — kalau setelah itu kamu menulis shorthand padding, nilai per sisi tadi akan tertimpa.

Langkah Selanjutnya

Sekarang kamu sudah pegang gambaran utuhnya: padding adalah bantalan di dalam elemen, margin adalah jarak di luarnya, shorthand-nya searah jarum jam dari atas, dan box-sizing: border-box menjaga hitungan ukuranmu tetap waras. Yang membedakan orang yang “tahu padding” dan yang “jago layout” tinggal satu: kebiasaan memilih alat yang tepat — padding untuk ruang internal, margin dan gap untuk ruang antar elemen — tanpa perlu mikir lagi.

Cara tercepat membentuk kebiasaan itu adalah latihan langsung. Mulai dari lesson padding untuk memantapkan dasar, lanjut ke lesson box model supaya hitungan konten–padding–border–margin benar-benar melekat, lalu mainkan nilai-nilainya sepuasnya di playground box model. Setelah itu, gerbang berikutnya adalah mengatur posisi elemen-elemen yang sudah rapi kotaknya — dan di situlah panduan Flexbox kami menunggumu. Selamat ngoding!