4. Box Model: Margin, Padding, dan Border

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

• Memahami konsep box model di CSS
• Menggunakan padding, border, dan margin dengan tepat
• Mengatur width, height, dan box-sizing

Materi Singkat

Ini adalah salah satu konsep paling fundamental di CSS. Setiap elemen HTML — paragraf, heading, div, gambar — adalah sebuah kotak (box). Dan setiap kotak memiliki empat lapisan.

Empat Lapisan Box Model

Bayangkan sebuah pigura foto:

┌──────────────────────────────────┐
│           MARGIN                  │  ← Jarak ke elemen lain (transparan)
│  ┌────────────────────────────┐  │
│  │         BORDER             │  │  ← Garis batas
│  │  ┌──────────────────────┐  │  │
│  │  │       PADDING        │  │  │  ← Ruang dalam (berwarna)
│  │  │  ┌────────────────┐  │  │  │
│  │  │  │    CONTENT     │  │  │  │  ← Konten asli (teks, gambar)
│  │  │  └────────────────┘  │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

• Content — teks atau gambar di dalamnya
• Padding — ruang kosong antara konten dan border (masih punya background)
• Border — garis tepi kotak
• Margin — jarak antara kotak ini dengan kotak lain (selalu transparan)

Padding

/* Semua sisi sama */
padding: 16px;
 
/* Atas-Bawah | Kiri-Kanan */
padding: 8px 16px;
 
/* Atas | Kiri-Kanan | Bawah */
padding: 8px 16px 12px;
 
/* Atas | Kanan | Bawah | Kiri (searah jarum jam) */
padding: 8px 16px 12px 8px;
 
/* Sisi spesifik */
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;

Border

/* Ketebalan | Jenis | Warna */
border: 1px solid #e5e7eb;
border: 2px dashed red;
border: 3px double blue;
 
/* Sisi spesifik */
border-top: 2px solid #2563eb;
border-bottom: 1px solid #e5e7eb;
 
/* Border radius — sudut membulat */
border-radius: 8px;       /* semua sudut */
border-radius: 50%;       /* lingkaran */
border-radius: 4px 8px;   /* atas-bawah | kiri-kanan */

Margin

Bekerja persis seperti padding, tapi untuk sisi luar:

margin: 16px;
margin: 16px auto;  /* auto di kiri-kanan = centered horizontally */
margin-top: 24px;
margin-bottom: 8px;

Catatan penting: margin: 0 auto adalah cara klasik untuk memusatkan elemen block secara horizontal (pastikan ada width atau max-width).

Width & Height

width: 300px;         /* lebar tetap */
width: 100%;          /* 100% dari lebar parent */
max-width: 800px;     /* lebar maksimal */
height: 200px;        /* tinggi tetap */
min-height: 100vh;    /* min tinggi = 100% tinggi viewport */

Box-Sizing (Penting!)

Secara default, width hanya menghitung konten. Padding dan border ditambahkan di luar.

/* Default (content-box): lebar total = 300 + 32 + 4 = 336px */
width: 300px;
padding: 16px;
border: 2px solid;
 
/* Solusi: border-box (lebih intuitif) */
* {
  box-sizing: border-box;
  /* Sekarang: lebar total = 300px termasuk padding dan border */
}

Tambahkan box-sizing: border-box ke semua elemen (*) di awal CSS-mu — ini praktik standar.

Contoh Kode

/* Reset dasar */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
body {
  font-family: sans-serif;
  padding: 24px;
  background-color: #f5f5f5;
  color: #1a1a1a;
}
 
.kartu {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  max-width: 480px;
}
 
.kartu h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
  color: #2563eb;
}
 
.kartu p {
  line-height: 1.6;
  color: #555;
}
 
.badge {
  display: inline-block;
  background-color: #dbeafe;
  color: #2563eb;
  border-radius: 9999px;   /* pil / pill shape */
  padding: 2px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

<div class="kartu">
  <h2>Pelajaran HTML</h2>
  <p>Belajar struktur dasar halaman web.</p>
  <span class="badge">Selesai</span>
</div>

Tugas Kecil

1. Tambahkan CSS box model ke profil.html dari Modul HTML (atau buat file baru):
   • Reset global: box-sizing: border-box, hapus margin dan padding default dengan * { margin: 0; padding: 0; }
   • body: padding 24px, background #f5f5f5, max-width 720px, margin auto
   • Setiap <section>: background putih, padding 24px, border-radius 8px, margin-bottom 16px, border tipis
   • h1 di <header>: padding-bottom 8px, border-bottom 2px solid accent
   • Gambar profil: border-radius 50% (agar jadi lingkaran), border 4px solid accent