Padding CSS adalah ruang tambahan yang diberikan di sekitar konten elemen, namun berada di dalam batas atau border elemen tersebut. Bukan sekadar ruang kosong; padding memiliki kekuatan untuk mengubah keseluruhan dinamika tampilan sebuah halaman web.

Jika diterapkan dengan tepat, padding dapat meningkatkan keterbacaan, estetika, dan interaksi pengguna dengan elemen-elemen yang ada di halaman. Namun, perlu diingat bahwa penambahan padding juga memengaruhi ukuran keseluruhan elemen.

Dengan demikian, diperlukan pemahaman mendalam tentang cara kerja padding dalam CSS agar kamu bisa menciptakan desain web yang harmonis dan berfungsi maksimal.

Fungsi Padding

Jika diibaratkan sebagai sebuah kotak dan di dalam kotak tersebut ada teks, padding adalah ruang antara teks dan tepi kotak. Hal ini mirip dengan cara kamu meletakkan foto di dalam bingkai lalu memberikan ruang antara foto dan tepi bingkai agar terlihat lebih menarik.

Jarak dalam padding memastikan teks tidak terlalu dekat dengan tepi, membuatnya lebih mudah dibaca. Kamu juga bisa mengontrol seberapa dekat atau jauh konten dari batas elemen, memberikan tampilan yang lebih rapi dan profesional.

Properti Padding CSS

Berikut properti yang sering dipakai dalam padding CSS: 

Cara Menggunakan Padding dalam CSS

Untuk menggunakan padding dalam CSS, berikut langkah demi langkah yang dapat dilakukan:

#1 Tentukan elemen yang ingin diberi padding

Sebelum menambahkan padding, tentukan elemen HTML mana yang ingin kamu modifikasi. Misalnya, kamu ingin mengubah tampilan elemen < div >.

#2 Buka berkas CSS

Buka berkas CSS yang terkait dengan halaman web kamu. Jika belum memiliki berkas CSS, buatlah terlebih dahulu lalu hubungkan dengan berkas HTML kamu.

#3 Tuliskan selector untuk elemen tersebut

Dalam berkas CSS, tuliskan selector untuk elemen yang ingin di modifikasi. Untuk elemen < div >, kamu bisa menulis div.

#4 Tentukan properti padding yang ingin digunakan

Ada beberapa cara untuk menentukan padding:

a. Padding di semua sisi: padding: 20px; (perintah ini akan memberikan padding sebesar 20px di semua sisi elemen).‍

b. Padding di sisi tertentu:‍

• Atas: padding-top: 20px;‍
• Kanan: padding-right: 15px;‍
• Bawah: padding-bottom: 25px;‍
• Kiri: padding-left: 10px;

c. Padding shorthand:

• 4 value: padding: (atas) (kanan) (bawah) (kiri);
• 3 value: padding: (atas) (kiri dan kanan) (bawah);
• 2 value: padding: (atas dan bawah) (kiri dan kanan);

#5 Simpan dan muat ulang halaman web

Setelah menambahkan kode padding, simpan berkas CSS dan refresh halaman web untuk melihat perubahannya.

Contoh:

Kamu memiliki elemen HTML berikut:

Tanpa padding, konten akan menempel pada batas kotak. Sekarang, mari kita tambahkan padding:

Dengan kode di atas, konten di dalam elemen < div > dengan class "kotak" akan memiliki jarak 20px dari batas kotaknya, membuatnya terlihat tampilan teks lebih “luas”.

FAQ (Frequently Asked Question)

Apa perbedaan padding dan margin di CSS?

Padding CSS adalah jarak atau ruang yang berada di antara konten elemen dengan batas atau border elemen tersebut. Padding berfungsi untuk memberikan ruang di dalam elemen, sehingga konten tidak menempel langsung pada batas atau border elemen.

Di sisi lain, margin CSS adalah jarak atau ruang yang berada di luar batas atau border elemen. Margin berfungsi untuk memberikan ruang di luar elemen, sehingga elemen tersebut terpisah dari elemen lain di sekitarnya.

Padding merupakan jarak dalam elemen. Sementara margin adalah jarak antar elemen.

Berikut tabel perbedaan antara padding dan margin di CSS:

Penutup

Padding CSS memberikan ruang tambahan di sekitar konten elemen, berfungsi untuk memberikan kesan yang lebih lega pada tampilan sebuah halaman web. Ketika memahami dan menerapkan padding secara tepat, kita bisa meningkatkan keterbacaan, estetika, dan interaksi pengguna dengan elemen-elemen di sekitar halaman.

Penting juga untuk diingat padding memiliki dampak langsung terhadap ukuran keseluruhan elemen, sehingga perlu diterapkan dengan bijak.