Box Model CSS: Memahami Dasar Layout Web

Mei 20, 2025

Apa Itu Box Model?

Dalam dunia pengembangan web, setiap elemen HTML dianggap sebagai sebuah kotak (box). Konsep ini disebut Box Model, yaitu struktur dasar yang digunakan oleh browser untuk merender dan menata elemen-elemen di halaman web.

Memahami box model sangat penting karena akan membantu Anda mengatur jarak antar elemen, ukuran konten, padding, border, dan margin dengan lebih tepat.

Struktur Box Model

Setiap elemen dalam box model terdiri dari 4 bagian utama:

Content – Bagian inti tempat konten seperti teks atau gambar berada.
Padding – Ruang kosong di sekitar konten, di dalam border.
Border – Garis pembatas antara padding dan margin.
Margin – Ruang kosong di luar border, untuk memisahkan elemen dari elemen lain.

⚠️ Secara default, lebar total elemen dihitung dengan rumus:
Total Lebar = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
Dan begitu juga untuk tinggi (height).

Elemen Box Model dalam CSS

Berikut adalah contoh penerapan masing-masing bagian dalam CSS:

.kotak {
    width: 200px;
    height: 100px;

    padding: 20px;        /* Ruang di dalam */
    border: 2px solid black; /* Garis pembatas */
    margin: 30px;         /* Jarak ke elemen lain */
}

Contoh hasil:

Lebar konten: 200px
Total lebar elemen = 200 + 202 + 22 + 30*2 = 200 + 40 + 4 + 60 = 304px

Mengatur Ukuran dengan box-sizing

Secara default, browser menggunakan box-sizing: content-box, yang membuat perhitungan lebar dan tinggi hanya mencakup konten saja — padding dan border tidak termasuk.

Namun, kita bisa mengubah perilaku ini dengan properti box-sizing:

1. box-sizing: content-box (default)

Hanya lebar dan tinggi konten yang diperhitungkan.

.kotak1 {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    /* Total lebar = 200 + 40 + 4 = 244px */
}

2. box-sizing: border-box

Padding dan border ikut diperhitungkan dalam lebar dan tinggi elemen.

.kotak2 {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    box-sizing: border-box;
    /* Total lebar tetap 200px */
}

💡 Banyak developer merekomendasikan menggunakan box-sizing: border-box secara global agar lebih mudah mengontrol ukuran elemen.

Contoh:

* {
    box-sizing: border-box;
}

Contoh Praktis

Mari kita buat contoh sederhana untuk melihat bagaimana box model bekerja.

HTML

<div class="kotak">
    <p>Ini adalah contoh kotak</p>
</div>

CSS

.kotak {
    width: 300px;
    padding: 20px;
    border: 3px dashed #333;
    margin: 40px auto;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

Kotak ini akan memiliki lebar total 300px, dengan padding dan border dihitung di dalamnya. Margin atas dan bawah adalah 40px, dan auto pada margin kiri dan kanan akan membuat kotak berada di tengah.

Visualisasi Box Model di Browser

Anda bisa menggunakan Developer Tools (F12) di browser untuk melihat box model secara langsung. Klik kanan pada elemen, pilih "Inspect", dan lihat informasi dimensi serta warna-warna padding, border, dan margin.

Kesimpulan

Box model adalah konsep dasar dalam pengembangan tampilan website. Dengan memahami cara kerja content, padding, border, dan margin, serta penggunaan box-sizing, Anda bisa mengatur layout elemen dengan lebih presisi dan efisien.

Selanjutnya, kita akan membahas Flexbox CSS, teknik layout modern untuk menyusun elemen dengan mudah dan rapi.

💡 Tips Praktis

Gunakan box-sizing: border-box untuk semua elemen agar lebih mudah mengatur ukuran.
Latih pengaturan padding, border, dan margin untuk melihat perbedaannya.
Gunakan Developer Tools untuk eksperimen langsung dengan box model.

Dasar CSS

Written by Kelvin Y.