Box Model CSS: Memahami Ukuran dan Jarak

Kalau ada satu konsep yang membedakan orang yang sekadar “agak ngerti” CSS dengan orang yang benar-benar menguasainya, jawabannya box model. Konsep inilah yang menjelaskan kenapa sebuah elemen berukuran segitu, kenapa muncul jarak di tempat yang sama sekali nggak kamu duga, dan gimana caranya menaruh celah persis di posisi yang kamu inginkan. Begitu konsep ini “nyangkut” di kepala, banyak hal di CSS yang tadinya bikin pusing langsung jadi masuk akal.

Intinya sebenarnya sederhana: di CSS, setiap elemen itu sebuah kotak. Teks dan gambar sekalipun sebetulnya duduk di dalam kotak. Dan setiap kotak tersusun dari empat lapisan yang saling membungkus dari dalam ke luar. Yuk kita bedah satu per satu.

Empat lapisan sebuah kotak

Bayangkan sebuah elemen sebagai beberapa persegi yang bertumpuk di dalam satu sama lain, dari yang paling dalam ke paling luar:

1. Content — isi sebenarnya: teks, gambar, atau apa pun yang ada di dalamnya. Ukurannya ditentukan oleh width dan height.
2. Padding — jarak di dalam kotak, di antara content dan border. Tugasnya mendorong border supaya menjauh dari content.
3. Border — garis yang mengelilingi padding. Kamu bisa atur lebar, gaya, dan warnanya.
4. Margin — jarak di luar kotak, yang memisahkan elemen ini dari elemen tetangganya. Tugasnya mendorong elemen lain supaya menjauh.

Ada cara gampang buat mengingat dua lapisan jarak ini: padding itu di dalam, margin itu di luar. Padding menambah ruang di dalam kotak dan ikut mewarisi warna latar kotak, sedangkan margin menambah ruang di sekeliling kotak dan selalu transparan. Tertukar antara keduanya adalah salah satu sumber kebingungan paling umum, jadi ada baiknya kamu luruskan dulu sejak awal.

Padding: jarak di dalam

Padding memberi ruang napas antara content sebuah elemen dan tepinya. Tanpa padding, teks bisa terasa sesak karena menempel langsung ke border:

.box {
  padding: 20px;
}

Baris itu menambahkan jarak 20 piksel di keempat sisi sekaligus. Tapi kamu juga bisa mengatur tiap sisi secara terpisah, atau memakai versi singkatnya (shorthand):

padding: 10px 20px;          /* atas/bawah 10, kiri/kanan 20 */
padding: 10px 20px 30px 40px; /* atas, kanan, bawah, kiri (searah jarum jam) */
padding-top: 10px;            /* hanya satu sisi */

Versi empat nilai dibaca searah jarum jam mulai dari atas: atas, kanan, bawah, kiri. Versi dua nilai artinya “vertikal, horizontal.” Pola shorthand seperti ini juga dipakai di margin, jadi sebaiknya kamu biasakan dari sekarang.

Margin: jarak di luar

Margin cara kerjanya mirip banget dengan padding, bedanya margin menambah jarak di luar border, sehingga sebuah elemen jadi terpisah dari elemen di sebelahnya:

.box {
  margin: 20px;
}

Aturan shorthand-nya sama persis (margin: 10px 20px;, atur per sisi, dan seterusnya). Ada satu trik yang sangat berguna: dengan menyetel margin kiri dan kanan ke auto, sebuah elemen blok akan otomatis rata tengah secara horizontal di dalam wadahnya:

.container {
  width: 600px;
  margin: 0 auto;   /* atas/bawah 0, kiri/kanan auto = rata tengah */
}

Pola margin: 0 auto ini adalah cara klasik untuk membuat blok dengan lebar tetap jadi rata tengah di halaman, dan kamu bakal sering banget memakainya nanti.

Border: garis di antaranya

Border posisinya ada di antara padding dan margin. Kamu bisa mengatur lebar, gaya, dan warnanya sekaligus, biasanya cukup ditulis dalam satu shorthand:

.box {
  border: 2px solid #00838f;
}

Itu artinya border garis padat berwarna teal selebar 2 piksel. Selain solid, ada pilihan gaya lain seperti dashed, dotted, dan none. Sudut kotaknya pun bisa kamu bikin membulat lewat border-radius:

.box {
  border-radius: 8px;   /* sudut membulat halus */
}

Kalau nilai border-radius-nya cukup besar (atau kamu pakai 50% pada kotak persegi), kotaknya bakal berubah jadi lingkaran penuh — persis cara avatar bulat dan tombol melingkar dibuat.

Bagian yang rumit: bagaimana width dihitung

Nah, sekarang kita masuk ke bagian yang nyaris menjebak semua orang. Coba bayangkan kamu menulis kode seperti ini:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Wajar saja kalau kamu mengira kotak ini lebarnya bakal 200px. Tapi secara default, ternyata bukan segitu! Berdasarkan aturan default yang lama, width itu hanya menentukan lebar content-nya saja — sementara padding dan border ditambahkan di luar angka itu. Jadi lebar kotak yang benar-benar tampil di layar adalah:

200 (content) + 20 + 20 (padding) + 5 + 5 (border) = lebar 250px

Kejutan inilah — kotak yang ternyata lebih besar dari width yang kamu setel — yang sudah bikin para pemula bingung selama lebih dari dua dekade. Untungnya, solusinya sederhana banget.

Solusinya: box-sizing: border-box

CSS menyediakan property bernama box-sizing yang mengubah cara width dihitung. Begitu kamu setel ke border-box, nilai width otomatis sudah memperhitungkan padding dan border, sehingga kotak dengan width: 200px betul-betul selebar 200px — persis seperti yang kamu bayangkan:

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Kotak ini lebarnya pas 200px. Padding dan border ikut masuk ke dalam. */
}

Cara ini jauh lebih intuitif, makanya hampir semua proyek modern langsung menerapkannya ke seluruh elemen, biasanya ditaruh paling atas di stylesheet:

* {
  box-sizing: border-box;
}

Tanda * itu disebut “universal selector” — dia mencocokkan setiap elemen yang ada. Cuma dengan satu baris ini, seluruh halaman jadi memakai model perhitungan ukuran yang lebih masuk akal.

Melihat box model sendiri

Kamu nggak perlu cuma membayangkan semua ini, karena browser bisa menampilkannya langsung buat kamu. Buka developer tools (umumnya lewat F12 atau klik kanan → Inspect), pilih salah satu elemen, dan kamu bakal melihat diagram berwarna dari kotaknya: content di bagian tengah, lalu padding, border, dan margin yang melapisinya satu per satu, lengkap dengan ukuran di tiap lapisan. Ini cara paling ampuh untuk benar-benar memahami box model, sekaligus alat debugging yang wajib kamu kuasai. Setiap kali jaraknya terasa aneh, diagram ini hampir selalu langsung menunjukkan penyebabnya.

Penutup

Box model adalah fondasi dari tata letak CSS, dan sekarang kamu sudah memahaminya:

• Setiap elemen itu kotak yang punya empat lapisan: content, padding (jarak di dalam), border (garisnya), dan margin (jarak di luar).
• Padding dan margin sama-sama memakai shorthand yang serupa (satu nilai untuk semua sisi, atau atas/kanan/bawah/kiri searah jarum jam). margin: 0 auto bikin blok dengan lebar tetap jadi rata tengah.
• Margin vertikal bisa runtuh menjadi nilai yang lebih besar di antara keduanya — itu perilaku yang memang dirancang begitu, bukan bug.
• border mengatur lebar, gaya, dan warna garis, sedangkan border-radius membulatkan sudut.
• Secara default, width belum menghitung padding dan border — makanya kotak sering keluar lebih besar dari dugaan. Atasi dengan box-sizing: border-box yang diterapkan ke semua elemen lewat * { box-sizing: border-box; }.

Setelah box model kamu kuasai, sekarang kamu siap mengatur jarak dan ukuran dengan lebih percaya diri. Di pembahasan berikutnya, kita akan menata teksnya sendiri — font dan tipografi — mulai dari keluarga font, ukuran, ketebalan, jarak antarhuruf, sampai cara membuat teks yang enak dipandang sekaligus nyaman dibaca.