Padding

Padding adalah komponen box model yang paling sering kita sentuh sehari-hari: hampir setiap kartu, tombol, dan kolom form membutuhkannya. Mengatur padding terasa sederhana, tetapi property ini menyimpan beberapa perilaku yang mudah terlewat — urutan nilai shorthand-nya, cara persentase dihitung, larangan nilai negatif, dan sifatnya pada elemen inline. Pada chapter ini kita menuntaskan semuanya, ditutup dengan resep jarak yang lazim dipakai pada komponen nyata.

Longhand dan Shorthand #

Satu property padding dapat menerima satu sampai empat nilai, dengan makna yang bergantung pada jumlahnya (pola ini sudah kita pelajari pada chapter Shorthand dan Longhand):

Empat kotak dengan background yang sama, masing-masing memakai bentuk penulisan yang berbeda:

Semua area padding pada keempat kotak itu ikut tertutup background — sifat yang membedakan padding dari margin.

Versi longhand-nya menamai sisi secara eksplisit: padding-top, padding-right, padding-bottom, dan padding-left. Longhand dipilih saat hanya satu sisi yang perlu berubah, misalnya menambah padding-top: 8px; tanpa menyentuh tiga sisi lainnya.

Persentase Mengacu pada Lebar Induk #

Nilai persentase pada padding dihitung terhadap lebar elemen induk — termasuk untuk padding-top dan padding-bottom. Bila induknya selebar 400px, padding: 10% menghasilkan 40px di keempat sisi, atas dan bawah termasuk. Perilaku ini sering mengejutkan karena jarak vertikal ternyata ikut bergantung pada ukuran horizontal induknya.

Fakta ini dulu dimanfaatkan sebagai trik menjaga rasio kotak: padding-top: 50% pada elemen tanpa konten menghasilkan kotak dua kali lebih lebar dari tingginya. Kini cara tersebut telah digantikan property aspect-ratio yang jauh lebih jelas maksudnya — kita kenali saat membahas gambar responsif.

Padding Tidak Menerima Nilai Negatif #

Berbeda dengan margin yang akan kita bahas nanti, padding tidak bisa negatif. Nilai seperti padding: -8px tidak valid, sehingga deklarasi itu diabaikan browser dan elemen memakai padding yang berlaku sebelumnya — tanpa pesan kesalahan yang terlihat. Logikanya masuk akal: padding adalah ruang di dalam kotak, dan ruang di dalam tidak mungkin lebih kecil dari nol. Bila konten terasa sempit, solusinya menambah padding atau memperbesar kotaknya, bukan sebaliknya.

Padding pada Elemen Inline #

Pada elemen inline seperti span atau a, padding horizontal bekerja normal: ia mendorong teks di kiri dan kanannya. Padding vertikalnya berbeda — background ikut membesar ke atas dan ke bawah, tetapi tinggi baris tidak berubah, sehingga latar elemen dapat menimpa baris di atas atau di bawahnya.

.tag-inline {
  display: inline;        /* padding vertikal tidak mendorong baris */
  padding: 24px 8px;
}

.tag-seimbang {
  display: inline-block;  /* padding vertikal ikut menghitung ruang baris */
  padding: 24px 8px;
}

Demo berikut menyandingkan keduanya dengan padding yang sama persis:

Bila elemen inline benar-benar butuh ruang vertikal, ubah display-nya — topik yang kita dalami lebih dalam pada bagian layout course ini.

Resep Praktis: Tombol, Kartu, dan Input #

.tombol-utama {
  padding: 10px 24px;      /* vertikal rapat, horizontal lega */
}

.kartu-artikel {
  padding: 24px;           /* ruang seragam dari segala sisi */
}

input.cari {
  padding: 8px 12px;       /* cukup untuk satu baris teks */
}

Demo berikut menerapkan ketiganya:

Angka-angka tersebut bukan patokan baku — jadikan titik mulai, lalu sesuaikan dengan skala tipografi halaman.

Ringkasan #

Padding mengatur ruang di dalam elemen dan selalu tertutup background-nya. Shorthand-nya menerima satu sampai empat nilai dengan urutan searah jarum jam, persentase-nya selalu mengacu pada lebar induk, dan nilai negatif tidak diterima. Pada elemen inline, padding vertikal tidak mendorong baris — ubah display bila ruang vertikal sungguhan dibutuhkan. Komponen berikutnya, border, menggambar garis tepi di luar padding ini — dan garis tersebut punya satu syarat yang sering terlewat.