Padding Adalah: Pengertian, Fungsi & Bedanya dari Margin

Setiap hal yang Anda lihat di sebuah halaman web digambar oleh browser sebagai kotak persegi. Judul, tombol, gambar, paragraf, bahkan satu ikon kecil di pojok layar — semuanya kotak.

Selama kotak itu hanya berisi teks polos tanpa warna, semuanya terlihat baik-baik saja. Persoalan muncul begitu kotak diberi warna latar atau garis tepi. Teks di dalamnya akan menempel persis di garis batas, tanpa jeda sedikit pun. Tombol terasa sesak dan mata pembaca cepat lelah karena tidak ada ruang bernapas antara huruf dan tepi kotak.

Padding adalah jawaban CSS untuk persoalan tersebut. Secara sederhana, padding adalah ruang kosong di dalam sebuah elemen, tepatnya di antara konten dan garis batas (border) elemen itu. Namun perannya jauh melampaui urusan estetika: padding mengubah ukuran sesungguhnya sebuah kotak, dan menentukan seberapa luas area yang bisa diklik pengunjung.

Padding Adalah Ruang di Dalam Kotak Elemen

Dalam bahasa Inggris, padding artinya bantalan atau ganjal — bahan lunak yang disisipkan untuk melindungi isi dari benturan dengan wadahnya. Makna itu terbawa hampir utuh ke CSS. Padding adalah lapisan penyangga yang memisahkan konten dari dinding kotaknya sendiri.

Nilai awal padding untuk semua elemen adalah 0. Artinya, selama Anda tidak menuliskannya, konten akan menempel rapat ke border. Sifat penting lain, padding tidak diwariskan ke elemen anak. Kalau Anda memberi padding pada sebuah <div>, paragraf di dalamnya tidak ikut mendapat padding yang sama. Setiap elemen membawa paddingnya masing-masing.

Padding merupakan salah satu properti paling dasar yang dipelajari saat mulai belajar CSS.

Posisi Padding dalam Box Model CSS

Untuk memahami padding, Anda perlu mengenal box model — model kotak yang dipakai browser untuk menghitung ukuran dan posisi setiap elemen. Box model terdiri dari empat lapis, dari dalam ke luar.

Diagram struktur margin, border, padding, dan konten elemen.

Lapisan paling dalam adalah konten: teks, gambar, atau elemen anak yang Anda tulis di HTML. Di sekelilingnya ada padding. Di luar padding ada border, garis batas yang bisa Anda beri ketebalan dan warna. Terakhir, di luar border ada margin, yang mendorong elemen lain menjauh.

Ada satu detail visual yang langsung membedakan padding dari margin, dan pemula sering melewatkannya. Warna latar sebuah elemen membentang sampai ke tepi border, sehingga area padding ikut terwarnai. Margin, sebaliknya, selalu transparan. Kalau Anda memberi warna kuning pada sebuah tombol lalu menambah padding, area kuningnya melebar. Kalau Anda menambah margin, yang melebar adalah jarak ke elemen tetangga, dan warna kuningnya tetap.

Empat Perbedaan Padding dan Margin

Perbedaan margin dan padding hampir selalu dijelaskan sebagai "margin di luar, padding di dalam". Penjelasan itu benar, tetapi berhenti terlalu cepat. Ada empat pembeda yang punya konsekuensi nyata saat Anda menyusun tata letak.

1. Letak terhadap border: Padding berada di dalam border, margin berada di luarnya. Konsekuensinya, padding memperbesar kotak elemen itu sendiri, sedangkan margin memperbesar jarak antar kotak.

2. Perilaku terhadap warna latar: Padding mewarisi warna latar dan gambar latar elemen. Margin tidak pernah bisa diberi warna. Kalau Anda ingin area berwarna sebuah kartu terlihat lebih lapang, padding jawabannya.

3. Nilai negatif: Margin boleh bernilai negatif untuk menarik elemen mendekat atau bertumpang tindih. Padding tidak boleh. Spesifikasi resmi CSS Box Model Module Level 3 dari W3C menyatakan nilai negatif pada properti padding adalah nilai yang tidak sah, sehingga browser mengabaikan deklarasinya. Larangan ini masuk akal: padding adalah bagian dari kotak, dan mengecilkannya hingga negatif berarti memaksa konten keluar dari kotaknya sendiri.

4. Penumpukan margin (margin collapsing): Dua margin vertikal yang bersentuhan akan runtuh menjadi satu, mengambil nilai terbesar. Paragraf dengan margin-bottom: 50px yang bertemu paragraf dengan margin-top: 30px hanya menyisakan jarak 50px, bukan 80px. Padding tidak pernah mengalami ini. Dua padding yang bersentuhan selalu dijumlahkan.

Baris terakhir tabel itu akan kita bahas tersendiri, karena di situlah letak fungsi padding yang paling sering diabaikan.

Diagram perbandingan padding dan margin pada kotak teks.

Cara Menulis Padding di CSS

Sebelum melangkah jauh, satu klarifikasi yang perlu diluruskan. Padding adalah properti CSS, bukan atribut HTML. Anda tidak akan menemukan <div padding="10"> di dokumentasi mana pun. Padding selalu ditulis di dalam blok gaya, entah lewat file .css terpisah, tag <style>, atau atribut style pada elemen.

CSS menyediakan empat properti terpisah untuk masing-masing sisi:

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

Menulis empat baris untuk satu elemen jelas melelahkan. Karena itu tersedia bentuk ringkas (shorthand) padding yang menerima satu sampai empat nilai sekaligus. Aturan urutannya mengikuti arah jarum jam, dimulai dari sisi atas:

/* Satu nilai: keempat sisi sama */
.a { padding: 16px; }

/* Dua nilai: atas-bawah | kiri-kanan */
.b { padding: 16px 24px; }

/* Tiga nilai: atas | kiri-kanan | bawah */
.c { padding: 16px 24px 32px; }

/* Empat nilai: atas | kanan | bawah | kiri */
.d { padding: 16px 24px 32px 8px; }

Deklarasi .b di atas menghasilkan hasil yang persis sama dengan blok empat baris pertama tadi. Untuk kebutuhan satu sisi saja, misalnya memberi jarak hanya di bagian bawah, Anda cukup menulis padding-bottom: 16px tanpa menyentuh sisi lain.

CSS modern juga menyediakan properti logis yang mengikuti arah tulisan, bukan arah fisik layar:

.kartu {
  padding-block: 16px;   /* atas dan bawah */
  padding-inline: 24px;  /* kiri dan kanan */
}

Pada tulisan Latin yang mengalir dari kiri ke kanan, hasilnya identik dengan padding: 16px 24px. Bedanya baru terasa pada bahasa yang ditulis dari kanan ke kiri seperti Arab, di mana padding-inline-start otomatis berpindah ke sisi kanan.

Memilih Satuan Padding: px, em, rem, atau Persen

Nilai padding bisa ditulis dalam berbagai satuan, dan pilihannya berpengaruh pada perilaku tampilan saat ukuran layar atau ukuran font berubah.

1. px (piksel): Satuan absolut. padding: 16px selalu 16 piksel, tidak peduli ukuran font di sekitarnya. Pilihan paling mudah diprediksi dan cocok untuk pemula.

2. em: Relatif terhadap ukuran font elemen itu sendiri. Kalau font elemen 20px, maka padding: 1em sama dengan 20px. Padding otomatis membesar mengikuti teksnya.

3. rem: Relatif terhadap ukuran font elemen akar (<html>), yang secara bawaan 16px di hampir semua browser. Jadi padding: 1rem sama dengan 16px. Satuan ini populer karena skalanya konsisten di seluruh halaman.

4. Persen (%): Relatif terhadap elemen induk. Di sinilah letak jebakan yang perlu Anda ketahui sejak awal.

Persentase padding selalu dihitung dari lebar elemen induk, bukan tingginya. Aturan ini berlaku untuk keempat sisi, termasuk padding-top dan padding-bottom. Spesifikasi W3C menyebutnya sebagai persentase terhadap logical width dari containing block.

Bayangkan sebuah <div> induk selebar 800px dan setinggi 200px. Elemen anak di dalamnya diberi padding-top: 10%. Hasilnya bukan 20px (10% dari tinggi), melainkan 80px (10% dari lebar). Kalau lebar induk berubah menjadi 400px, padding atas ikut menyusut menjadi 40px, meskipun tingginya tidak berubah sama sekali.

Perilaku yang terasa aneh ini sebenarnya disengaja. Karena tinggi sebuah elemen sering ditentukan oleh isinya, menghitung padding dari tinggi akan menciptakan hubungan melingkar: padding menentukan tinggi, tinggi menentukan padding. Spesifikasi memutus lingkaran itu dengan mengunci semua persentase ke lebar.

Diagram persentase padding dihitung dari lebar induk, bukan tinggi.

Efek samping dari aturan ini justru dimanfaatkan bertahun-tahun sebagai trik menjaga rasio aspek kotak video atau gambar. Sebuah elemen dengan padding-top: 56.25% akan selalu memiliki tinggi 56,25% dari lebarnya, yaitu rasio 16:9.

Fungsi Padding yang Sering Terlewat: Memperbesar Area Sentuh

Fungsi padding pada CSS biasanya dijelaskan sebatas merapikan tampilan. Padahal ada fungsi lain yang berdampak langsung pada kegunaan sebuah situs: padding memperbesar area yang menerima klik dan sentuhan.

Ketika pengunjung mengetuk layar, browser menentukan elemen mana yang tersentuh berdasarkan kotak border elemen tersebut. Padding termasuk di dalam kotak itu, sehingga area padding ikut menerima sentuhan. Margin berada di luar kotak, sehingga sentuhan di area margin tidak mengaktifkan apa-apa.

Konsekuensinya besar untuk tombol dan tautan kecil. Sebuah ikon 16×16 piksel nyaris mustahil disentuh dengan tepat oleh jempol, apalagi oleh pengguna dengan tremor tangan. Menambahkan padding 4 piksel di setiap sisi melipatgandakan area sentuh menjadi 24×24 piksel, tanpa mengubah ukuran ikonnya sedikit pun.

Angka 24 piksel bukan tebakan. Panduan aksesibilitas WCAG 2.2 dari W3C mengaturnya lewat kriteria sukses 2.5.8 Target Size (Minimum). Pada tingkat AA, ukuran target penunjuk minimal 24 × 24 CSS pixel. Untuk tingkat AAA, kriteria 2.5.5 Target Size (Enhanced) menuntut minimal 44 × 44 CSS pixel.

W3C bahkan menerbitkan teknik resmi bernomor C44 yang secara eksplisit memakai padding untuk memenuhi ukuran tersebut:

.pagination-list a {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

Jadi, untuk memperbesar tombol yang sulit disentuh, gunakan padding, bukan margin.

Padding, box-sizing, dan Layout yang Tiba-tiba Melebar

Pertanyaan yang muncul cepat atau lambat: kalau padding menambah ruang di dalam kotak, apakah kotaknya jadi lebih besar? Jawabannya tergantung pada properti box-sizing.

Secara bawaan, CSS memakai box-sizing: content-box. Dalam mode ini, properti width hanya mengatur lebar area konten. Padding dan border ditambahkan di luar angka itu. Perhatikan kotak berikut:

.kotak {
  width: 350px;
  padding: 25px;
  border: 5px solid black;
}

Lebar sesungguhnya kotak tersebut di layar adalah 410 piksel: 350 + 25 + 25 + 5 + 5. Inilah penyebab paling umum layout yang tiba-tiba melebar dan merusak barisan kolom. Anda menyetel lebar 350px, browser menggambar 410px.

Solusinya adalah box-sizing: border-box. Dalam mode ini, width mencakup konten, padding, dan border sekaligus. Kotak yang sama akan digambar tepat 350 piksel, dengan area konten menyusut menjadi 290 piksel.

.kotak {
  box-sizing: border-box;
  width: 350px;
  padding: 25px;
  border: 5px solid black;
}

Menariknya, browser sudah lama menerapkan border-box sebagai bawaan untuk sebagian elemen form seperti <button>, <select>, <table>, dan beberapa tipe <input>. Ketidakseragaman inilah yang membuat banyak developer menyeragamkannya di awal file CSS:

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

Tiga baris ini membuat setiap angka width yang Anda tulis berarti lebar akhir di layar.

Kesalahan Umum Saat Memakai Padding

Empat kekeliruan berikut hampir selalu ditemui pada halaman yang ditulis pemula.

1. Memberi padding vertikal pada elemen inline: Elemen seperti <span> dan <a> bersifat inline. Padding atas dan bawah pada elemen inline memang membesarkan kotaknya, tetapi tidak mendorong baris di atas dan di bawahnya. Akibatnya kotak elemen menimpa teks tetangga. Perbaikannya adalah mengubahnya menjadi display: inline-block atau display: block, yang membuat elemen menghormati seluruh properti box model.

2. Memakai padding untuk memberi jarak antar elemen: Padding menambah ruang di dalam kotak, bukan di antara dua kotak. Kalau Anda ingin dua kartu berjarak 24px, gunakan margin atau gap pada induknya. Memaksakan padding hanya akan memperbesar kartu, bukan memisahkannya.

3. Mengira persentase padding vertikal mengacu ke tinggi: Seperti dibahas di atas, padding-top: 10% dihitung dari lebar induk. Banyak waktu terbuang mencari penyebab padding yang berubah-ubah saat jendela browser diperkecil.

4. Menulis padding negatif: Deklarasi seperti padding: -10px tidak akan memunculkan pesan kesalahan apa pun. Browser hanya mengabaikannya secara diam-diam. Kalau Anda perlu menarik elemen keluar dari kotaknya, margin negatif adalah alat yang tepat.

Kelemahan dan Hal yang Perlu Anda Pertimbangkan

Padding bukan properti tanpa konsekuensi. Ada beberapa hal yang perlu Anda timbang sebelum menaburkannya ke seluruh halaman.

Padding vertikal menambah tinggi halaman. Section pembuka dengan padding atas-bawah 100px terlihat lapang di monitor lebar, tetapi di layar ponsel padding itu mendorong informasi penting jauh ke bawah. Pengunjung harus menggulir sebelum melihat apa pun yang berguna.

Padding horizontal memakan lebar yang sudah sempit. Pada layar 360 piksel, kartu dengan padding kiri-kanan 32px hanya menyisakan 296 piksel untuk teks. Kalimat menjadi pendek-pendek dan jumlah baris membengkak.

Padding juga tidak bisa ditembus. Berbeda dengan margin yang menerima nilai negatif, tidak ada cara menarik konten keluar melewati padding elemen induknya. Kalau Anda perlu gambar yang membentang penuh sampai tepi kartu, padding induk harus dikeluarkan dari perencanaan sejak awal.

Terakhir, nilai padding yang tidak konsisten antar komponen membuat tampilan terasa berantakan meskipun setiap komponennya rapi bila dilihat sendiri-sendiri. Tombol dengan padding 13px bersanding dengan input berpadding 11px akan terlihat tidak sejajar, dan penyebabnya sulit ditemukan.

Rekomendasi Nilai Padding yang Bisa Anda Pakai

Cara paling efektif menjaga konsistensi adalah mengunci semua nilai padding pada kelipatan 4px atau 8px. Dengan batasan itu, Anda tidak lagi memilih di antara 13px dan 14px, cukup memilih di antara 12px dan 16px.

Untuk layar di bawah 640 piksel, pangkas padding horizontal section menjadi 16px agar teks mendapat ruang maksimal. Ikon yang berfungsi sebagai tombol wajib mendapat padding secukupnya hingga total area sentuh mencapai minimal 24×24 piksel.

Padding di Framework CSS Modern

Kalau Anda memakai sebuah framework CSS, padding jarang ditulis manual. Framework membungkusnya menjadi kelas utilitas dengan skala yang sudah ditetapkan.

Tailwind CSS memakai kelipatan 0.25rem alias 4 piksel per satuan. Kelas p-4 berarti padding: 1rem atau 16 piksel di keempat sisi. Kelas px-6 memberi padding kiri-kanan sebesar 1,5rem (24 piksel), sedangkan py-2 memberi padding atas-bawah 0,5rem (8 piksel).

Bootstrap memakai pendekatan serupa dengan skala berbeda. Kelas p-3 setara padding: 1rem, dan p-5 setara padding: 3rem. Bootstrap juga menyediakan varian responsif seperti px-md-5, yang baru aktif pada layar ukuran medium ke atas.

Perlu diperhatikan, semua kelas tersebut pada akhirnya diterjemahkan menjadi properti padding CSS yang sama persis. Framework hanya memberi Anda skala yang konsisten dan nama yang lebih pendek. Aturan tentang box model, persentase, dan area sentuh tetap berlaku seluruhnya.

Pertanyaan yang Sering Diajukan

Apakah padding bisa bernilai negatif? Tidak. Spesifikasi W3C menyatakan nilai negatif pada padding tidak sah, dan browser akan mengabaikan deklarasinya tanpa pesan kesalahan. Gunakan margin negatif kalau Anda perlu menarik elemen keluar dari posisinya.

Apa bedanya padding: 10px 20px dan padding: 10px 20px 10px 20px? Tidak ada. Keduanya menghasilkan padding atas dan bawah 10px, kiri dan kanan 20px. Bentuk dua nilai hanyalah singkatan dari bentuk empat nilai yang simetris.

Kenapa padding tidak berpengaruh pada <tr>? Properti padding tidak berlaku pada elemen dengan display bertipe baris dan kolom tabel, termasuk <tr>, <thead>, <tfoot>, dan <colgroup>. Berikan padding pada sel <td> atau <th> sebagai gantinya.

Bagaimana memberi padding hanya di bagian bawah? Gunakan properti tunggal padding-bottom: 16px. Sisi lain tidak akan tersentuh dan tetap memakai nilai yang sudah ada.

Apakah padding memengaruhi kecepatan halaman? Tidak secara langsung. Padding hanya menambah perhitungan tata letak yang sangat ringan. Yang perlu dijaga adalah dampaknya pada tinggi halaman, karena padding berlebih mendorong konten penting keluar dari layar pertama.

Kesimpulan

Padding adalah ruang di dalam kotak sebuah elemen, di antara konten dan bordernya. Ia mewarisi warna latar, tidak boleh bernilai negatif, dan tidak pernah bertumpuk seperti margin. Yang paling sering terlupakan, padding ikut menentukan luas area yang bisa diklik pengunjung.

Aturan praktisnya sederhana. Pakai padding kalau Anda ingin memberi ruang bernapas di dalam sebuah elemen atau memperbesar area sentuhnya. Pakai margin kalau Anda ingin memberi jarak antara satu elemen dengan elemen lain. Kunci semua nilai pada kelipatan 4px atau 8px. Setel juga box-sizing: border-box di awal file CSS, supaya angka lebar yang Anda tulis benar-benar menjadi lebar yang digambar browser.

Semoga artikel ini membantu.