BAB 12: Padding CSS

Di bab sebelumnya kita mengatur margin — ruang di luar elemen yang mendorong elemen-elemen lain menjauh. Sekarang giliran sisi yang berlawanan: ruang di dalam elemen, antara konten dan batasnya. Inilah padding.

Kalau margin adalah halaman yang memberi jarak antar buku di rak, padding adalah margin kertas di dalam buku itu sendiri — ruang kosong yang membuat teks tidak menempel langsung ke tepi. Tanpa padding, teks dalam sebuah tombol atau kartu terasa sesak dan sulit dibaca.

Properti Padding per Sisi

Padding bekerja dengan pola yang persis sama seperti margin: ada empat properti individual untuk masing-masing sisi.

Nilai padding bisa menggunakan satuan px, em, rem, atau %. Satu hal yang berbeda dari margin: padding tidak bisa bernilai negatif. Margin negatif valid di CSS dan kadang berguna, tapi padding negatif tidak diizinkan — nilai negatif akan diabaikan browser.

Shorthand Padding

Shorthand padding bekerja dengan pola yang identik dengan margin: satu hingga empat nilai dengan urutan searah jarum jam dari atas.

Pola 2 nilai adalah yang paling sering digunakan untuk komponen seperti tombol dan label — vertikal lebih kecil dari horizontal untuk membentuk proporsi yang nyaman di mata.

Padding dan Pengaruhnya pada Lebar Elemen

Ini adalah sumber kebingungan yang paling umum saat belajar CSS: padding menambah lebar elemen secara default. Jika sebuah elemen memiliki width: 300px dan padding: 20px, lebar totalnya di halaman menjadi 340px (300 + 20 kiri + 20 kanan).

Perilaku ini berasal dari model box CSS default yang disebut content-box — width hanya mengontrol area konten, sementara padding dan border ditambahkan di luar area tersebut.

Untuk sebagian besar proyek modern, perilaku ini diatasi dengan box-sizing: border-box, di mana width mencakup padding dan border sekaligus. Tapi itu topik yang akan dibahas lebih mendalam di Bab 77.

Padding dengan Nilai Persentase

Ketika menggunakan % sebagai nilai padding, persentase itu dihitung dari lebar elemen induk — bukan dari tinggi atau lebar elemen itu sendiri. Ini berlaku untuk semua sisi, termasuk padding-top dan padding-bottom.

Sifat ini dimanfaatkan untuk teknik klasik mempertahankan aspek rasio elemen — nilai 56.25% untuk padding-top menghasilkan tinggi yang selalu 56.25% dari lebar, membuat elemen berperilaku layaknya video 16

.

Padding pada Berbagai Elemen

Tombol dan Link

Padding adalah properti pertama yang dipasang saat mendesain tombol. Tanpa padding, teks di dalam tombol tidak memiliki ruang bernapas.

Kartu Konten

Padding pada kartu menentukan jarak antara konten kartu dan tepi visualnya. Nilai yang terlalu kecil membuat kartu terasa sesak; terlalu besar membuat konten terasa tenggelam di ruang kosong.

Input Form

Padding pada elemen <input> menentukan seberapa luas area klik dan keterbacaan teks yang diketik.

Latihan

Buka file profil.css dari proyek portofolio yang terus kita kerjakan bersama:

1. Buat class .kartu-skill dengan padding: 20px, border: 1px solid #e2e8f0, dan border-radius: 8px. Bandingkan penampilannya sebelum dan sesudah padding — amati bagaimana teks di dalam kartu mendapat ruang yang lebih nyaman.

2. Buat class .tombol-portofolio dengan padding: 12px 28px. Kemudian coba ubah nilai padding-nya menjadi 4px 8px. Rasakan perbedaan "kebesaran" tombol yang dihasilkan oleh padding yang berbeda.

3. Buat sebuah <div> dengan width: 200px, padding: 30px, dan background-color: #f1f5f9. Gunakan DevTools browser untuk mengukur lebar total elemen tersebut di halaman. Cocokkan hasilnya dengan perhitungan manual: apakah 260px?

Sekarang kita sudah menguasai dua dimensi ruang dalam CSS: margin di luar dan padding di dalam. Keduanya mengontrol jarak, tapi ada dimensi ketiga yang belum kita eksplorasi: ukuran elemen itu sendiri. Seberapa tinggi dan seberapa lebar sebuah elemen bisa diatur? Itu yang akan kita jawab di bab berikutnya.

Referensi

1. 1 MDN Web Docs — CSS padding shorthand property
2. 2 MDN Web Docs — Introduction to the CSS box model
3. 3 W3C — CSS Box Model Level 3: Padding