Padding di CSS

Padding di CSS adalah ruang kosong di bagian dalam elemen yang memisahkan konten dengan tepi elemen, sehingga tampilan menjadi lebih lega, rapi, dan mudah dibaca.

Halo teman-teman, semoga kalian dalam keadaan semangat belajar web hari ini. Pada artikel ini kodelyly.com akan membahas cara kerja padding, perbedaannya dengan margin, hingga contoh praktis yang bisa langsung kalian pakai di proyek.

Padding Di CSS: Pengertian Dan Fungsi

Padding di CSS berfungsi menambah ruang di sisi dalam box model. Ketika kalian memberi padding, ukuran visual elemen ikut membesar kecuali jika box sizing diatur ke border-box. Efek utamanya adalah memperbaiki keterbacaan dan memberi ruang napas pada teks atau komponen UI. Padding juga membantu konsistensi jarak dalam komponen seperti kartu, tombol, dan form.

Cara Menulis Properti Padding

Kalian dapat menulis padding secara longhand maupun shorthand.

Contoh longhand untuk tiap sisi:

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

Contoh shorthand yang lebih ringkas:

/* Satu nilai: semua sisi */
.box { padding: 16px; }

/* Dua nilai: vertikal horizontal */
.panel { padding: 12px 24px; }

/* Tiga nilai: top horizontal bottom */
.badge { padding: 8px 12px 10px; }

/* Empat nilai: top right bottom left (searah jarum jam) */
.alert { padding: 8px 16px 8px 16px; }

Jika kalian memakai box-sizing: border-box;, total lebar elemen akan menghitung padding di dalam lebar yang ditentukan, memudahkan layout responsif.

Perbedaan Padding Vs Margin

Perbedaan ini sering membingungkan, jadi lihat ringkasan berikut.

Praktik Terbaik

Gunakan skala jarak yang konsisten agar desain terasa harmonis. Kalian bisa menetapkan variabel atau token desain seperti 4, 8, 12, 16 agar mudah diingat. Untuk tombol dan elemen interaktif, pakailah padding yang cukup supaya area klik nyaman di layar sentuh. Ketika membangun layout responsif, sesuaikan padding dengan media query agar konten tidak terasa sempit pada layar kecil dan tidak terlalu renggang pada layar besar. Hindari memasukkan nilai ekstrem tanpa alasan, dan cek kembali kontras serta keterbacaan setelah menambah ruang.

Contoh Kasus Sederhana

Berikut contoh kartu produk dengan padding yang nyaman dilihat.

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
}
.card h3 { margin: 0 0 8px 0; font-size: 18px; }
.card p { margin: 0; line-height: 1.6; }

Dengan pendekatan ini, judul, deskripsi, dan tombol di dalam kartu terasa lebih seimbang karena ruang dalam yang cukup.

FAQ: Padding Di CSS

1) Apa Itu Padding Di CSS?

Padding adalah ruang kosong di dalam batas (border) elemen yang memisahkan konten dari tepi elemen. Padding membuat konten lebih lega dan mudah dibaca.

2) Apa Bedanya Padding Dan Margin?

• Padding: ruang di dalam elemen; ikut terkena warna latar/background elemen; bisa menambah ukuran visual elemen (kecuali box-sizing: border-box).
• Margin: ruang di luar elemen; transparan (tidak mewarisi background); tidak menambah ukuran elemen.

3) Bagaimana Cara Menulis Shorthand Padding Dan Urutannya?

Empat nilai dibaca searah jarum jam: top, right, bottom, left (TRBL).

.box { padding: 8px 16px 8px 16px; } /* TRBL */
.box { padding: 12px 24px; }        /* vertikal 12, horizontal 24 */
.box { padding: 8px 12px 10px; }    /* top 8, kanan&kiri 12, bottom 10 */
.box { padding: 16px; }             /* semua sisi 16 */

Untuk kontrol per sisi, gunakan longhand:

.box { padding-top: 16px; padding-right: 20px; padding-bottom: 16px; padding-left: 20px; }

4) Apa Pengaruh box_sizing Terhadap Padding?

• content-box (default): padding menambah lebar/tinggi visual elemen.
• border-box: padding dihitung di dalam lebar/tinggi yang ditetapkan, sehingga ukuran total elemen tidak “melebar”.

5) Kapan Pakai Padding Vs Margin?

• Pakai padding saat ingin memberi napas pada konten di dalam elemen (mis. isi kartu, tombol, input form).
• Pakai margin saat ingin mengatur jarak antar elemen (mis. jarak antar kartu, antar paragraf, antar section).
  Tip: tetapkan skala jarak konsisten (mis. 4, 8, 12, 16) agar desain rapi.

6) Apakah Padding Bisa Bernilai Negatif? Bagaimana Dengan Responsif?

• Tidak, padding tidak mendukung nilai negatif; gunakan margin jika perlu “menarik” elemen keluar.
• Untuk responsif, sesuaikan padding dengan media query atau unit relatif (rem, %) agar tidak terlalu sempit di mobile dan tidak terlalu renggang di layar besar.

Bonus: Padding mewarisi background elemen, sedangkan margin tidak. Ini sebabnya area berpadding terlihat “berwarna” jika elemen punya background.

Kesimpulan

Padding di CSS adalah kunci untuk menciptakan ruang dalam elemen sehingga konten lebih rapi, nyaman, dan enak dilihat. Gunakan shorthand untuk menulis lebih cepat, pahami beda padding dan margin, serta terapkan skala jarak yang konsisten agar antarmuka terasa profesional. Sekian artikel dari kodelyly.com, semoga bermanfaat dan sampai jumpa di pembahasan berikutnya.