Skip to content
Kuliah Coding

CSS Padding

Setelah memahami CSS Margin, sekarang waktunya kita lanjut ke CSS Padding, yaitu cara mengatur jarak di dalam elemen, antara konten dan border.

Padding sangat berguna untuk memberi “napas” pada konten agar tidak terlalu mepet ke tepi.

Apa Itu Padding?

Section titled “Apa Itu Padding?”

Padding adalah ruang di dalam elemen HTML, antara konten (teks/gambar) dan border (garis tepi). Padding memberi ruang lega agar konten terlihat lebih rapi dan mudah dibaca.

Fungsi Padding

Section titled “Fungsi Padding”
  • Memberi jarak antara isi dan border
  • Membuat tampilan konten lebih seimbang dan nyaman
  • Mempengaruhi ukuran elemen secara keseluruhan (kecuali jika pakai box-sizing: border-box)

Cara Mengatur Padding

Section titled “Cara Mengatur Padding”

1. Padding Seragam Semua Sisi

Section titled “1. Padding Seragam Semua Sisi”

Contoh:

.element {
  padding: 20px;
}

Artinya: padding 20px di atas, kanan, bawah, dan kiri.

2. Padding Spesifik Sisi

Section titled “2. Padding Spesifik Sisi”
PropertiFungsi
padding-topJarak dari atas
padding-rightJarak dari kanan
padding-bottomJarak dari bawah
padding-leftJarak dari kiri

Contoh:

.element {
  padding-top: 10px;
  padding-left: 15px;
}

Shorthand 4 Nilai (Top, Right, Botton, Left)

Section titled “Shorthand 4 Nilai (Top, Right, Botton, Left)”

Contoh:

padding: 10px 20px 30px 40px;

Artinya:

  • Top: 10px
  • Right: 20px
  • Bottom: 30px
  • Left: 40px

4. Shorthand 2 atau 3 Nilai

Section titled “4. Shorthand 2 atau 3 Nilai”

Contoh:

padding: 20px 10px;
/* Atas & bawah: 20px, kiri & kanan: 10px */


padding: 10px 15px 5px;
/* Atas: 10px, kiri & kanan: 15px, bawah: 5px */

Contoh Kode Lengkap Penggunaan Padding

Section titled “Contoh Kode Lengkap Penggunaan Padding”
<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      background-color: #ff7043;
      color: white;
      padding: 20px;
      margin: 20px;
      border: 2px solid #d84315;
    }


    .tight-box {
      padding: 5px;
    }
  </style>
</head>
<body>


  <div class="box">Ini kotak dengan padding 20px</div>
  <div class="box tight-box">Ini kotak dengan padding 5px</div>


</body>
</html>

Hasilnya:

css-padding-example

Perbedaan Margin vs Padding

Section titled “Perbedaan Margin vs Padding”
MarginPadding
LetaknyaDi luar elemen (luar border)Di dalam elemen (dalam border)
FungsinyaJarak antar elemenJarak isi & border
Pengaruh ukuranTidak menambah ukuran elemenMenambah ukuran elemen total

Catatan: box-sizing

Section titled “Catatan: box-sizing”

Secara default, padding akan menambah total lebar elemen. Tapi jika ingin padding tidak memengaruhi ukuran total, gunakan:

Contoh:

* {
  box-sizing: border-box;
}

Kesimpulan

Section titled “Kesimpulan”

CSS Padding sangat penting untuk:

  • Menyusun konten yang rapi & tidak mepet
  • Meningkatkan kenyamanan baca
  • Membuat desain lebih seimbang