Andika Rekatias

Box Model dalam CSS: Margin, Border, Padding

| CSS | css, tutorial, box-model
Box Model dalam CSS: Margin, Border, Padding

Setiap elemen HTML yang Anda lihat di browser sebenarnya adalah kotak — entah itu teks, gambar, button, atau container. Prinsip ini dalam CSS namanya Box Model.

Kalau Anda ngerti Box Model, Anda ngerti kenapa spacing di halaman web kadang gak sesuai ekspektasi. Dan kalau ngerti kenapa, Anda bisa perbaiki dengan tepat.

1. Apa Itu Box Model?

Bayangin setiap elemen di halaman web itu dibungkus 4 lapis — dari dalam ke luar:

┌─────────────────────────┐
│        MARGIN            │
│  ┌───────────────────┐  │
│  │      BORDER        │  │
│  │  ┌─────────────┐  │  │
│  │  │   PADDING    │  │  │
│  │  │  ┌────────┐  │  │  │
│  │  │  │ CONTENT │  │  │  │
│  │  │  └────────┘  │  │  │
│  │  └─────────────┘  │  │
│  └───────────────────┘  │
└─────────────────────────┘

Content — isi sebenarnya (teks, gambar, dsb). Padding — ruang antara content dan border. Border — garis tepi di sekitar padding. Margin — ruang di luar border, memisahkan elemen dari elemen lain.

Kalau Anda pernah bingung kenapa elemen Anda “makan tempat” terus, biasanya masalahnya di salah satu dari empat layer ini.

2. Content — Isi Elemen

Content adalah area di mana teks, gambar, atau elemen lainnya ditampilkan. Ukurannya ditentukan oleh properti seperti width dan height.

.kotak {
  width: 300px;
  height: 200px;
  background-color: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

<div class="kotak">Ini content-nya!</div>

Hasilnya adalah kotak 300×200 piksel dengan teks di tengahnya.

Tapi ingat — width dan height hanya mengatur content area. Padding, border, dan margin dihitung terpisah. Ini yang sering bikin orang terkejut.

3. Padding — Ruang Dalam

Padding adalah jarak antara content dan border. Bayangin padding itu seperti bantalan di dalam kotak.

.kotak {
  width: 200px;
  height: 100px;
  padding: 20px;
  background-color: #3b82f6;
  color: white;
  border: 3px solid #1e40af;
}

Dengan padding 20px di semua sisi, content area sebenarnya jadi lebih kecil dari yang Anda kira. Lebar total elemen ini bukan 200px, tapi 200 + 20 + 20 + 3 + 3 = 246px.

Shorthand Padding

Anda bisa atur padding per sisi atau sekaligus:

/* Semua sisi sama */
.kotak { padding: 20px; }

/* Atas-bawah: 10px, Kiri-kanan: 30px */
.kotak { padding: 10px 30px; }

/* Atas, Kanan, Bawah, Kiri (searah jarum jam) */
.kotak { padding: 10px 20px 30px 40px; }

/* Per sisi secara spesifik */
.kotak {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

4. Border — Garis Tepi

Border adalah garis yang mengelilingi padding. Ini yang bikin elemen keliatan “ada tepinya”.

.kotak {
  padding: 20px;
  background-color: #f0fdf4;
  border: 3px solid #16a34a;
  border-radius: 12px;
}

Shorthand Border

/* width style color */
.kotak { border: 3px solid #1e40af; }

/* Border per sisi */
.kotak {
  border-top: 2px dashed red;
  border-bottom: 4px double blue;
}

/* Rounded corners */
.kotak { border-radius: 12px; }
.kotak { border-radius: 50%; } /* jadi lingkaran kalau ukurannya square */

Border Style

Style Tampilan
solid Garis solid
dashed Garis putus-putus
dotted Garis titik-titik
double Garis ganda
none Gak ada border

Anda juga bisa pakai border-collapse di tabel supaya border-nya gak dobel.

5. Margin — Ruang Luar

Margin adalah jarak di luar border, memisahkan elemen dari elemen lain di sekitarnya.

.kotak {
  padding: 20px;
  border: 2px solid #1e40af;
  margin: 16px 0;
  background-color: #eff6ff;
}

<div class="kotak">Kotak 1</div>
<div class="kotak">Kotak 2</div>
<div class="kotak">Kotak 3</div>

Shorthand Margin

Sama kayak padding, margin bisa di-shorthand:

/* Semua sisi sama */
.kotak { margin: 16px; }

/* Atas-bawah: 16px, Kiri-kanan: auto */
.kotak { margin: 16px auto; }

/* Per sisi */
.kotak {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

Margin Auto — Centering

Salah satu penggunaan margin paling populer: centering horizontal.

.kotak {
  width: 600px;
  margin: 0 auto;
}

margin: 0 auto artinya margin atas-bawah 0, kiri-kanan otomatis. Elemen akan berada di tengah parent-nya.

6. box-sizing — Mengubah Perilaku Box Model

Ini yang paling sering bikin orang pusing.

Secara default, CSS pakai box-sizing: content-box. Artinya width dan height hanya mengatur content area. Padding dan border ditambahkan di luar.

/* Default — content-box */
.kotak {
  width: 200px;
  padding: 20px;
  border: 3px solid black;
  /* Total lebar = 200 + 20 + 20 + 3 + 3 = 246px */
}

Tapi kebanyakan developer lebih suka pakai border-box — di mana width dan height sudah termasuk padding dan border.

.kotak {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 3px solid black;
  /* Total lebar = 200px (sudah termasuk padding + border) */
}

Reset Universal

Hampir semua proyek modern pakai reset ini di CSS:

*, *::before, *::after {
  box-sizing: border-box;
}

Dengan reset ini, Anda gak perlu mikir “oh width-nya gak termasuk padding” lagi. Ini standar di hampir semua CSS framework (Tailwind, Bootstrap, dsb).

Perbandingan Visual

Skenario content-box border-box
width: 200px, padding: 20px Content = 200px, Total = 240px Total = 200px, Content = 160px
width: 200px, border: 5px Content = 200px, Total = 210px Total = 200px, Content = 190px
width: 200px, padding: 20px, border: 5px Total = 250px Total = 200px

7. Margin Collapse — Fenomena Aneh

Ini sesuatu yang bikin banyak developer geleng-geleng kepala.

Margin collapse terjadi ketika dua margin vertikal yang berdekatan bertemu — mereka gak dijumlahkan, tapi collapse (ambruk) jadi satu margin yang lebih besar.

.atas {
  margin-bottom: 30px;
  background-color: #fca5a5;
  padding: 10px;
}

.bawah {
  margin-top: 20px;
  background-color: #93c5fd;
  padding: 10px;
}

<div class="atas">Kotak Atas</div>
<div class="bawah">Kotak Bawah</div>

Anda mungkin berharap jarak antara kedua kotak ini 30 + 20 = 50px. Tapi ternyata cuma 30px! Yang lebih besar dari keduanya. Itulah margin collapse.

Kapan Margin Collapse Terjadi?

  • Antara dua elemen block yang berdekatan secara vertikal
  • Antara elemen block dan elemen child-nya (parent tanpa border/padding)
  • Margin kosong (auto) juga bisa collapse

Kapan Gak Terjadi?

  • Margin horizontal gak pernah collapse
  • Di dalam flex container
  • Di dalam grid container
  • Kalau parent-nya punya border, padding, overflow: hidden, atau display: flow-root

Cara Menghindari Margin Collapse

/* Cara 1: pakai flexbox */
.parent {
  display: flex;
  flex-direction: column;
  gap: 30px; /* gap gak pernah collapse */
}

/* Cara 2: pakai border atau padding di parent */
.parent {
  border-top: 1px solid transparent;
  /* atau */
  padding-top: 0.1px;
}

/* Cara 3: pakai flow root */
.parent {
  display: flow-root;
}

8. Total Width & Height — Rumus Lengkap

Kalau Anda pakai content-box (default), rumus total ukuran elemen:

Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Total Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Kalau pakai border-box:

Total Width = width + margin-left + margin-right
             (width sudah termasuk padding + border)

Total Height = height + margin-top + margin-bottom
               (height sudah termasuk padding + border)

Contoh konkret:

/* content-box */
.kotak {
  width: 200px;
  padding: 20px;
  border: 3px solid black;
  margin: 10px;
}
/* Total = 200 + 20 + 20 + 3 + 3 + 10 + 10 = 266px */

/* border-box */
.kotak {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 3px solid black;
  margin: 10px;
}
/* Total = 200 + 10 + 10 = 220px */

9. Contoh Praktik Lengkap

Berikut contoh yang menggabungkan semua konsep Box Model:

*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 350px;
  padding: 24px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  margin: 16px auto;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.card p {
  margin-top: 0;
  color: #64748b;
  line-height: 1.6;
}

.card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

<div class="card">
  <h3>Box Model dalam CSS</h3>
  <p>Setiap elemen di web itu kotak. Margin, padding, dan border menentukan 
     ukuran dan spacing-nya.</p>
  <div class="card-footer">
    <a href="#">Baca Selengkapnya →</a>
  </div>
</div>

Dengan border-box, width 350px benar-benar 350px — padding 24px dan border 2px sudah termasuk di dalamnya.

10. Tips & Best Practices

1. Selalu pakai border-box

*, *::before, *::after {
  box-sizing: border-box;
}

Tanpa ini, layout Anda akan sering “rusak” karena width gak sesuai ekspektasi.

2. Gunakan gap untuk spacing antar elemen

.container {
  display: flex;
  gap: 16px; /* lebih mudah dari margin per elemen */
}

gap gak pernah collapse — beda sama margin.

3. Hati-hati dengan margin auto

.element {
  width: 300px;
  margin: 0 auto; /* hanya center horizontal */
}

margin: auto gak bisa center vertikal — untuk itu perlu flexbox atau grid.

4. Perhatikan margin collapse di vertical spacing

Kalau spacing-nya gak sesuai ekspektasi, cek apakah terjadi margin collapse. Kadang lebih aman pakai gap atau padding di parent.

5. Gunakan DevTools untuk inspeksi

Tekan F12 di browser, klik elemen, dan lihat tab “Computed” — di sana Anda bisa lihat ukuran content, padding, border, dan margin secara visual.

Ringkasan

Layer Fungsi Properti Utama
Content Isi elemen (teks, gambar) width, height
Padding Ruang dalam antara content dan border padding
Border Garis tepi border, border-radius
Margin Ruang luar pemisah antar elemen margin

Dan yang paling penting: paket box-sizing: border-box supaya width dan height sudah termasuk padding dan border.

Box Model itu dasar dari semua layout di CSS. Kalau Anda ngerti ini, konsep layout kayak Flexbox dan Grid jadi lebih gampang dipahami.

← Sebelumnya: Selector & Properties Selanjutnya: Typography & Colors →
Mail Facebook Twitter Whatsapp