Skip to main content

Box Model

Oke, setelah kita jago milih-milih elemen pake selector, sekarang pertanyaannya: gimana cara ngatur ukuran dan jarak antar elemen itu? Kenapa kok kadang elemen satu nempel banget sama elemen lainnya?

Nah, jawabannya ada di konsep paling fundamental dalam layout CSS: Box Model.

Gampangnya gini, setiap elemen HTML di halaman web itu dianggap sebagai sebuah kotak (box). Entah itu paragraf, judul, gambar, atau bahkan sebuah div kosong. Semuanya adalah kotak yang punya ruang. Sama kayak di kamarmu, ada kasur, lemari, meja, semua punya area dan jaraknya masing-masing.

Apa Saja Isi Kotak Itu?​

Setiap kotak ini terdiri dari empat lapisan, dari paling dalam ke paling luar:

  1. Content (Konten)
  2. Padding (Bantalan)
  3. Border (Garis Batas)
  4. Margin (Jarak Luar)

Biar gampang bayanginnya, lihat struktur ini:

+---------------------------------------------------+
| Margin                                            |
|   +-------------------------------------------+   |
|   | Border                                    |   |
|   |   +-----------------------------------+   |   |
|   |   | Padding                           |   |   |
|   |   |   +---------------------------+   |   |   |
|   |   |   |          Content          |   |   |   |
|   |   |   |       (teks, gambar)      |   |   |   |
|   |   |   +---------------------------+   |   |   |
|   |   +-----------------------------------+   |   |
|   +-------------------------------------------+   |
+---------------------------------------------------+

Yuk, kita bedah satu per satu!

1. Content​

Ini paling gampang. Content adalah isi utama dari elemenmu. Bisa berupa teks di dalam paragraf, sebuah gambar <img>, atau elemen-elemen lain di dalam sebuah <div>. Ukurannya ditentukan oleh properti width dan height.

2. Padding​

Padding itu ibarat ruang napas di dalam kotak. Ini adalah area transparan yang berada di antara konten dan border. Tujuannya adalah memberi jarak agar konten tidak terlalu mepet dengan garis batasnya.

Misal kita punya kotak ini:

<div class="kotak-contoh">
  Ini adalah konten di dalam kotak.
</div>
.kotak-contoh {
  border: 2px solid #333;
  padding: 20px; /* Memberi jarak 20px di semua sisi (atas, kanan, bawah, kiri) */
}

Tanpa padding, teksnya bakal nempel banget sama garis border. Dengan padding, teksnya jadi kelihatan lebih rapi dan lega di dalam.

3. Border​

Border adalah bingkai dari kotak kita. Kita bisa atur ketebalan, gaya, dan warnanya.

.kotak-contoh {
  /* tebal: 3px, gaya: solid (garis lurus), warna: crimson */
  border: 3px solid crimson; 
}

Gaya border ada macam-macam, lho. Selain solid, ada juga dotted (titik-titik), dashed (garis putus-putus), dan lainnya.

4. Margin​

Nah, kalau Padding adalah ruang di dalam border, Margin adalah zona pribadi atau ruang di luar border. Margin ini transparan dan fungsinya untuk mendorong elemen lain menjauh. Inilah yang kita pakai untuk mengatur jarak antar elemen.

Misal kita punya dua kotak:

<div class="kotak-satu">Kotak Pertama</div>
<div class="kotak-dua">Kotak Kedua</div>
.kotak-satu {
  margin-bottom: 30px; /* Dorong elemen di bawahnya sejauh 30px */
}

Hasilnya, kotak-dua akan berada 30px di bawah kotak-satu. Mereka jadi nggak saling nempel lagi.

Masalah Lebar dan Properti box-sizing (Ini Penting!)​

Ada satu hal yang sering bikin pemula pusing. Secara default, kalau kamu atur width: 200px, itu cuma lebar untuk Content-nya saja. Lebar total kotaknya jadi: width + padding kiri & kanan + border kiri & kanan. Ribet kan ngitungnya?

Contoh:

.box {
  width: 200px; /* Lebar konten */
  padding: 10px;
  border: 2px solid black;
}

Lebar total yang tampil di layar bukan 200px, tapi 200px + 10px + 10px + 2px + 2px = 224px. Ini sering bikin layout berantakan.

Solusinya? Gunakan properti box-sizing!

.box {
  box-sizing: border-box; /* Ini dia penyelamatnya! */
  width: 200px; 
  padding: 10px;
  border: 2px solid black;
}

Dengan box-sizing: border-box;, lebar yang kamu set di width (yaitu 200px) adalah lebar total dari kotak itu, sudah termasuk padding dan border. Browser akan otomatis menyesuaikan area kontennya jadi lebih kecil. Jauh lebih gampang dan intuitif!

Tips Pro: Banyak developer memulai file CSS mereka dengan aturan ini agar semua elemen jadi lebih mudah diatur:

* {
  box-sizing: border-box;
}

Kesimpulan​

Sekarang kamu tahu kalau setiap elemen itu adalah sebuah kotak. Kamu bisa mengatur:

  • Padding: untuk ruang di dalam batas.
  • Border: untuk bingkai/garis batas.
  • Margin: untuk jarak dengan elemen lain.

Nah sekarang kamu sudah bisa memahami bagaimana sih elemen-elemen di HTML terstruktur dan tampil lebih dalam. Sekarang kamu bisa lakuin banyak latihan, banyak coba-coba, trial-error, karena itulah menurutku the only best way to learn. Jadiii tetep semangat dan kalau ada yang bingung bisa langsung tanya aku yeahh. See you guysss.