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:

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

  2. Padding di sisi tertentu:‍

    1. Atas: padding-top: 20px;‍

    2. Kanan: padding-right: 15px;‍

    3. Bawah: padding-bottom: 25px;‍

    4. Kiri: padding-left: 10px;

  3. Padding shorthand:

    1. 4 value: padding: (atas) (kanan) (bawah) (kiri);

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

    3. 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:

Ini adalah konten di dalam kotak