CSS Padding: Shorthand, Sisi, Persentase dan Contoh

Apa itu padding

Padding adalah ruang di dalam sebuah elemen, di antara isi dan border-nya. Padding ikut memakai background elemen, jadi inilah property yang memberi ruang lega pada tombol, kartu, atau badge.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

Area biru adalah isinya. Pita hijau di sekelilingnya adalah padding 24px di setiap sisi, dan border berada di luarnya.

Shorthand padding: 1, 2, 3, atau 4 nilai

padding mengatur keempat sisi dalam satu deklarasi. Jumlah nilai menentukan sisi mana mendapat nilai mana, searah jarum jam mulai dari atas:

Dua nilai berarti "vertikal, horizontal". Tiga nilai berarti "atas, horizontal, bawah". Empat nilai berputar searah jarum jam: atas, kanan, bawah, kiri (dalam bahasa Inggris, cara mengingat yang populer adalah TRouBLe).

Ketik shorthand apa saja di bawah. Kotaknya digambar ulang, dan browser melaporkan nilai yang didapat setiap sisi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Coba 8px, 8px 24px, 0 0 40px, dan 1em 5%. Nilai yang tidak valid, seperti -10px, diabaikan, dan kotaknya tetap memakai padding valid yang terakhir.

Satu sisi sekaligus

Setiap sisi punya property sendiri, yang lebih jelas daripada shorthand empat nilai kalau kamu hanya ingin mengubah satu sisi:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Shorthand yang diikuti satu sisi adalah pola yang umum: atur semuanya, lalu sesuaikan satu sisi.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Urutannya penting di sini: shorthand padding yang ditulis setelah padding-bottom akan me-reset sisi bawah kembali ke 16px.

Padding logis: padding-inline dan padding-block

padding-left dan padding-right bersifat fisik: keduanya tetap di sisi yang sama dalam bahasa apa pun. Property logis justru mengikuti arah tulisan, dan itulah yang kamu butuhkan di situs yang juga ditampilkan dari kanan ke kiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Padding memperbesar kotak (kecuali dengan border-box)

Secara default, width hanya lebar isinya, dan padding ditambahkan di atasnya. Kotak dengan width: 200px dan padding: 20px lebarnya 240px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box menjaga kotak tetap 200px dan mengambil padding dari bagian dalamnya. Halaman box model membahas hitungan lengkapnya.

Padding persentase

Padding persentase diukur terhadap lebar elemen induk, di keempat sisi, termasuk atas dan bawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

Dari sinilah asal trik lama "padding-top: 56.25%" untuk kotak video 16:9. Sekarang aspect-ratio: 16 / 9 melakukan hal yang sama secara langsung.

Padding pada tombol dan link

Padding adalah cara yang tepat untuk memperbesar link atau tombol, karena padding adalah bagian dari elemen sehingga juga menjadi bagian dari area yang bisa kamu klik atau ketuk. Margin memang menambah ruang, tetapi tidak memperbesar area sasarannya.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Nilai yang diterima padding

Kesalahan yang sering terjadi

• Urutan yang salah di shorthand empat nilai. Urutannya atas, kanan, bawah, kiri, searah jarum jam.
• Kotak membesar saat kamu menambahkan padding. Atur box-sizing: border-box.
• Memakai padding untuk memisahkan dua elemen. Jarak antar elemen adalah margin, sedangkan padding adalah ruang di dalam satu elemen. Lihat margin vs padding.
• Padding vertikal pada link inline yang menimpa baris lain. Ubah link itu menjadi inline-block.
• Padding negatif atau padding: auto. Keduanya tidak valid dan diabaikan tanpa pemberitahuan.