Margin dan Padding

Sebuah kartu produk yang rapi jarang menempel langsung pada teks di sekitarnya; selalu ada jarak yang memisahkan kartu dari konten lain. Jarak tersebut bukan hasil kebetulan, melainkan hasil kerja dua properti CSS: margin untuk jarak di luar elemen dan padding untuk jarak di dalam elemen. Keduanya bagian dari konsep yang disebut box model, cara browser membungkus setiap elemen HTML dengan beberapa lapis kotak. Pada Chapter ini kita membedah box model, mencoba shorthand kedua properti tersebut, lalu menerapkannya pada contoh kartu profil.

Box Model: Empat Lapis Kotak #

Browser menggambar setiap elemen HTML sebagai kotak persegi panjang, sekecil apa pun isinya. Kotak itu tersusun dari empat lapis yang berurutan dari dalam ke luar, dan seluruhnya dirangkum dalam istilah box model.

Diagram berikut menggambarkan susunan lapis tersebut dari luar ke dalam:

Sebagai teks: kotak terluar adalah margin, yaitu ruang kosong tanpa gambar apa pun; di dalamnya terdapat border sebagai garis tepi; setelah itu padding sebagai bantalan; dan paling dalam adalah content, tempat teks atau gambar berada.

Margin: Jarak di Luar Elemen #

Properti margin menetapkan ruang di luar border, pemisah antara elemen dengan tetangganya. Setiap sisi punya properti sendiri: margin-top, margin-right, margin-bottom, dan margin-left. Selain menulis empat properti terpisah, kita dapat memakai shorthand margin dengan satu sampai empat nilai:

margin: 16px;                     /* keempat sisi 16px */
margin: 16px 24px;                /* atas-bawah 16px, kiri-kanan 24px */
margin: 16px 24px 8px;            /* atas 16px, kiri-kanan 24px, bawah 8px */
margin: 16px 24px 8px 4px;        /* atas, kanan, bawah, kiri */

Urutan nilai pada bentuk empat nilai berjalan searah jarum jam mulai dari atas. Pola ini berlaku sama untuk padding, sehingga cukup dihafal satu kali.

Padding: Jarak di Dalam Elemen #

Properti padding menetapkan bantalan di antara isi elemen dan border, sehingga teks di dalam kartu tetap berjarak dari pinggir kartu. Shorthand padding menerima satu sampai empat nilai dengan aturan yang sama persis seperti margin.

.kartu {
  padding: 24px;          /* bantalan 24px di keempat sisi */
  padding-left: 40px;     /* sisi kiri dibuat lebih lega */
}

Satu perbedaan perilaku perlu diingat: nilai padding tidak boleh negatif, sedangkan margin menerima nilai negatif untuk efek tertentu. Pada tahap saat ini, gunakan nilai nol atau positif untuk keduanya agar layout mudah diprediksi.

Ketika Margin Bertumpuk (Margin Collapse) #

Perilaku margin yang sering mengejutkan terjadi pada elemen blok yang bertumpuk secara vertikal. Margin bawah elemen atas dan margin atas elemen bawah tidak dijumlahkan; keduanya melebur menjadi satu jarak sebesar nilai yang lebih besar.

h1 {
  margin-bottom: 32px;
}
p {
  margin-top: 16px;
}

Output yang Dihasilkan:

Jarak antara h1 dan p di halaman adalah 32px, bukan 48px.
Margin 16px dari p terserap ke dalam margin 32px milik h1.

Mereset Margin Bawaan #

Browser menerapkan stylesheet bawaan yang memberi margin pada banyak elemen: body berjarak dari tepi jendela, sedangkan h1 dan p berjarak dari elemen sekitarnya. Cara ringkas menetralkannya adalah universal selector, yaitu tanda bintang * yang memilih semua elemen sekaligus:

* {
  margin: 0;
}

Setelah reset ini, satu-satunya sumber jarak adalah aturan yang kita tulis sendiri. Banyak proyek menambahkan padding: 0; pada reset yang sama agar penanda daftar dan elemen form ikut netral.

Contoh Lengkap: Kartu Profil #

Sekarang kita gabungkan konsep Chapter ini menjadi satu halaman kartu profil. Simpan kedua file dalam folder yang sama, lalu buka file HTML dengan browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Profil</title>
  <link rel="stylesheet" href="gaya-kartu.css">
</head>
<body>
  <article class="kartu">
    <h2>Budi Santoso</h2>
    <p>Penulis konten yang menekuni HTML dan CSS.</p>
  </article>
  <article class="kartu">
    <h2>Siti Rahma</h2>
    <p>Ilustrator yang menggambar aset untuk web.</p>
  </article>
</body>
</html>

* {
  margin: 0;
}

body {
  font-family: sans-serif;
  background-color: #e2e8f0;
}

.kartu {
  background-color: #ffffff;
  padding: 24px;
  margin: 40px;
  border: 1px solid #94a3b8;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Dua kartu putih di atas latar abu-abu muda
  - Teks di dalam setiap kartu berjarak 24px dari tepi kartu (padding)
  - Jarak setiap kartu ke tepi jendela dan ke kartu lain 40px (margin)
  - Jarak vertikal antara kartu pertama dan kedua 40px, bukan 80px,
    karena margin bawah dan margin atas yang bertemu melebur

Mari kita telaah bagian yang menentukan tampilan:

1. Selektor * dengan margin: 0: mereset jarak bawaan browser pada body, h2, dan p.
2. body { font-family; background-color }: memilih font dan memberi latar abu-abu agar batas kartu putih terlihat jelas.
3. .kartu { padding: 24px }: isi kartu berjarak 24px dari tepi kartu; area ini ikut terwarnai putih.
4. .kartu { margin: 40px }: setiap kartu berjarak 40px dari tepi jendela dan dari tetangganya.
5. .kartu { border: 1px solid #94a3b8 }: garis tepi tipis sebagai penanda batas; properti border dibahas tuntas pada Chapter berikutnya.
6. Dua elemen article dengan class kartu: struktur yang sama memperoleh tampilan yang sama, dan jarak vertikalnya mengikuti aturan margin collapse.

Chapter berikutnya melengkapi kotak tersebut: menggambar border pada empat sisinya dan membulatkan sudutnya dengan border-radius.

Referensi resmi untuk pendalaman:

• MDN Web Docs — margin
• MDN Web Docs — padding
• MDN Web Docs — Learn: Box model

* {
  margin: 0;
}

body {
  font-family: sans-serif;
  background-color: #e2e8f0;
}

.kartu {
  background-color: #ffffff;
  padding: 24px;
  margin: 40px;
  border: 1px solid #94a3b8;
}

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Profil</title>
  <link rel="stylesheet" href="gaya-kartu.css">
</head>
<body>
  <article class="kartu">
    <h2>Budi Santoso</h2>
    <p>Penulis konten yang menekuni HTML dan CSS.</p>
  </article>
  <article class="kartu">
    <h2>Siti Rahma</h2>
    <p>Ilustrator yang menggambar aset untuk web.</p>
  </article>
</body>
</html>