Padding

 

---

Apa Itu Padding?

Pengertian Padding

Padding adalah ruang kosong di dalam elemen (kontainer) yang terletak antara konten dan batas (border) elemen tersebut. Padding digunakan untuk memberi jarak dalam agar konten tidak terlalu menempel pada batas elemen.

Dalam desain web (terutama CSS), padding berfungsi untuk mempercantik tampilan dan meningkatkan keterbacaan dengan memberi ruang di dalam elemen.

---

Struktur Padding dalam CSS

Padding dapat diatur dengan properti CSS seperti berikut:

padding: 20px; /* Padding semua sisi */
padding: 10px 20px; /* Atas & bawah: 10px, kiri & kanan: 20px */
padding: 10px 15px 20px 25px; /* Atas, kanan, bawah, kiri */

Urutan padding (jika ditulis 4 nilai) adalah:

atas → kanan → bawah → kiri (searah jarum jam)

---

Perbedaan Padding, Margin, dan Border

Properti	Fungsi	Lokasi
Padding	Jarak antara konten dan border	Di dalam elemen
Border	Garis tepi elemen	Di antara padding dan margin
Margin	Jarak antara elemen dengan elemen lain	Di luar elemen

---

Contoh Penggunaan

<div style="padding: 20px; background-color: lightgray;">
  Ini adalah teks dengan padding 20px.
</div>

Hasil: Teks akan memiliki ruang kosong (20px) di sekelilingnya, membuat tampilannya lebih rapi dan tidak menempel ke tepi kotak abu-abu.

---

Manfaat Padding

• Meningkatkan kenyamanan visual

• Memisahkan konten dari tepi elemen

• Membantu menciptakan tata letak (layout) yang bersih dan rapi

• Membantu dalam desain responsif

---

Catatan Penting

• Padding memengaruhi ukuran elemen secara keseluruhan, kecuali jika menggunakan box-sizing: border-box.

• Padding bisa berbeda-beda di setiap sisi elemen.

---

Kesimpulan

Padding adalah komponen penting dalam desain antarmuka, baik di web, aplikasi, maupun UI/UX desain. Dengan padding, kita bisa mengatur tata letak agar tampak lebih nyaman dilihat dan lebih profesional.

---