Abd. Asis

Di bab sebelumnya, kamu sudah bisa mengatur tinggi dan lebar elemen dengan height dan width. Tapi ada sesuatu yang mungkin terasa aneh: mengapa elemen yang kamu beri width: 300px bisa terlihat jauh lebih lebar dari 300 piksel di layar? Jawabannya ada di konsep yang jadi fondasi semua layout di CSS — Box Model.

Begitu kamu memahami Box Model, banyak perilaku CSS yang sebelumnya terasa membingungkan akan langsung masuk akal. Ini bukan sekadar teori — ini adalah cara browser melihat dan menempatkan setiap elemen di halaman.

Setiap Elemen adalah Sebuah Kotak

Browser memperlakukan setiap elemen HTML sebagai kotak persegi panjang. Tidak peduli apakah itu paragraf, gambar, tombol, atau <div> kosong — semuanya adalah kotak. CSS Box Model mendefinisikan bagaimana kotak itu tersusun dari dalam ke luar.

Kotak ini terdiri dari empat lapisan:

Diagram CSS Box Model

Content — area tempat teks dan gambar berada; ukurannya ditentukan oleh width dan height
Padding — ruang transparan di antara konten dan border; menambah jarak dalam elemen
Border — garis yang mengelilingi padding dan konten
Margin — ruang transparan di luar border; memberi jarak antar elemen

Kamu sudah belajar masing-masing lapisan ini secara terpisah di bab-bab sebelumnya. Sekarang kita melihatnya sebagai satu kesatuan yang bekerja bersama.

Kalkulasi Ukuran Total Elemen

Inilah bagian yang paling sering membuat bingung: ketika kamu menetapkan width: 300px, ukuran itu hanya berlaku untuk area konten. Browser kemudian menambahkan padding dan border di atas itu.

Rumus total ukuran elemen (secara default):

Lebar total  = width + padding-left + padding-right + border-left + border-right
Tinggi total = height + padding-top + padding-bottom + border-top + border-bottom

Margin tidak dihitung sebagai bagian dari ukuran elemen itu sendiri — margin hanya mempengaruhi jarak antar elemen.

Mari kita lihat contohnya:

/* portofolio.css */
.kartu-profil {
  width: 300px;
  padding: 20px;
  border: 5px solid #334155;
  margin: 10px;
}

Lebar total .kartu-profil bukan 300px, melainkan:

300px (content)
+ 20px (padding-left)
+ 20px (padding-right)
+ 5px  (border-left)
+ 5px  (border-right)
= 350px

Tinggi total dihitung dengan cara yang sama. Margin sebesar 10px hanya menciptakan ruang di luar elemen, tidak menambah ukuran elemennya sendiri.

Ini adalah sumber bug layout yang paling umum di CSS. Kamu menetapkan width: 300px tapi elemen terlihat lebih lebar — hampir pasti karena padding atau border yang terlupakan masuk ke kalkulasi.

Membuktikannya dengan DevTools

Cara terbaik memahami Box Model bukan membaca — tapi langsung melihatnya di browser. Buka DevTools di Chrome atau Firefox (tekan F12), lalu klik elemen apapun di halaman. Di panel Computed atau Styles, kamu akan melihat diagram Box Model visual yang menunjukkan nilai margin, border, padding, dan content secara real-time.

Ini sangat berguna saat debugging layout yang terasa "melebihi container" atau elemen yang tidak mau rata.

Contoh Lengkap Box Model

Berikut implementasi yang menampilkan keempat lapisan Box Model secara nyata:

<!-- index.html -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>CSS Box Model</title>
  <link rel="stylesheet" href="portofolio.css">
</head>
<body>
  <div class="kartu-profil">
    <h2>Abd. Asis</h2>
    <p>Web Developer</p>
  </div>
</body>
</html>

/* portofolio.css */
body {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

.kartu-profil {
  width: 300px;
  padding: 24px;
  border: 4px solid #3b82f6;
  margin: 40px auto;
  background-color: #ffffff;
}

Dengan CSS ini, ukuran total .kartu-profil adalah:

Lebar total: 300 + 24 + 24 + 4 + 4 = 356px
Tinggi total: otomatis menyesuaikan konten + 24 + 24 + 4 + 4 = tinggi konten + 56px

Margin 40px auto tidak masuk ke ukuran elemen — ia hanya mendorong elemen 40px dari atas dan bawah, serta memusatkan elemen secara horizontal.

Mengubah Perilaku Kalkulasi dengan box-sizing

CSS punya cara untuk mengubah aturan kalkulasi ini. Properti box-sizing menentukan apakah padding dan border dihitung di dalam atau di luar width yang kamu tetapkan.

Ada dua nilai utama:

Nilai	Perilaku
`content-box`	Default. `width` hanya untuk konten. Padding dan border ditambahkan di luar.
`border-box`	`width` mencakup konten, padding, dan border sekaligus.

/* portofolio.css */

/* Default — width 300px hanya untuk konten */
.kotak-default {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #334155;
  /* lebar total: 350px */
}

/* border-box — width 300px sudah termasuk padding dan border */
.kotak-border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #334155;
  /* lebar total: tetap 300px */
}

Dengan border-box, lebar yang kamu tulis adalah lebar yang benar-benar kamu dapatkan. Inilah mengapa hampir semua developer modern menerapkan aturan ini ke seluruh elemen:

/* portofolio.css */

/* Reset global — teknik yang sangat umum digunakan */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Dengan satu baris selector universal ini, semua elemen di halaman menggunakan border-box. Layout jadi jauh lebih mudah diprediksi karena ukuran yang kamu tulis di CSS adalah ukuran yang kamu lihat di browser.

Kamu akan melihat * { box-sizing: border-box } di hampir setiap project CSS modern, termasuk framework seperti Bootstrap dan Tailwind CSS. Jadikan ini kebiasaan sejak awal.

Latihan

Eksperimen berikut akan memperjelas perbedaan content-box dan border-box:

Buat dua <div> berdampingan dengan class berbeda. Berikan keduanya width: 200px, padding: 20px, dan border: 5px solid. Terapkan box-sizing: content-box ke satu dan border-box ke yang lain. Amati perbedaan lebar totalnya di DevTools.
Tambahkan margin: 20px ke kedua elemen tersebut. Periksa berapa jarak yang terbentuk antar elemen — apakah margin dijumlahkan (40px) atau ada perilaku lain?
Coba ganti nilai padding dan border sambil mempertahankan width: 200px dengan border-box. Apakah lebar elemen berubah?

Jawaban latihan nomor 2 berkaitan dengan fenomena margin collapse yang sudah kita bahas di Bab 11 — ini saat yang tepat untuk mengingat kembali perilakunya.

Box Model sudah kamu pahami sekarang. Tapi ada satu lapisan di sekitar elemen yang belum dibahas: outline. Berbeda dari border, outline tidak mempengaruhi kalkulasi ukuran sama sekali — dan itulah yang membuatnya berguna untuk kasus-kasus tertentu yang akan kita eksplorasi di bab berikutnya.

BAB 14: Box Model CSS

Setiap Elemen adalah Sebuah Kotak

Kalkulasi Ukuran Total Elemen

Membuktikannya dengan DevTools

Contoh Lengkap Box Model

Mengubah Perilaku Kalkulasi dengan box-sizing

Latihan

Referensi