Box Model
Pada dasarnya, browser menganggap setiap elemen HTML sebagai sebuah kotak persegi empat
Author : Celvine
Last Update : 06 March 2026
1. Penjelasan
Setiap kotak (elemen) dalam CSS terdiri dari empat lapisan, dari dalam ke luar:
- Content: Tempat teks atau gambar berada. Ukurannya diatur oleh
widthdanheight. - Padding: Ruang kosong di dalam elemen, antara konten dan border. Padding membuat konten tidak menempel ke pinggir.
- Border: Garis yang membungkus padding dan konten.
- Margin: Ruang kosong di luar elemen. Digunakan untuk memberi jarak antar elemen agar tidak berdempetan.
Masalah: Secara default, jika kamu memberi width: 300px lalu menambah padding: 20px dan border: 5px, total lebar elemenmu akan menjadi 350px (300 + 20 + 20 + 5 + 5). Untuk menghindari pusing menghitung manual, gunakan properti box-sizing: border-box;.
2. Sintaksis & Properti
Berikut adalah cara mengatur Box Model:
.kotak {
/* 1. Ukuran Konten */
width: 300px;
height: auto;
/* 2. Padding (Atas Kanan Bawah Kiri) */
padding: 20px;
/* 3. Border (Tebal Gaya Warna) */
border: 2px solid #3498db;
/* 4. Margin (Jarak Luar) */
margin: 10px auto; /* 'auto' untuk membuat elemen ke tengah secara horizontal */
/* Solusi agar ukuran tetap konsisten */
box-sizing: border-box;
}Contoh lengkap
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 600px;
}
.col {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid black;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="col">Kolom 1</div>
<div class="col">Kolom 2</div>
</div>
</body>
</html>3. Studi Kasus: Membuat Kartu Testimonial
Mari kita terapkan Box Model untuk membuat kartu kutipan (testimonial) agar teksnya nyaman dibaca dan posisinya rapi di tengah halaman.
<blockquote class="testimonial-card">
<p>"Belajar CSS dengan Box Model ternyata seru banget! Sekarang layout saya tidak lagi berantakan."</p>
<cite>- Andi, Pemula Web</cite>
</blockquote>.testimonial-card {
width: 400px;
background-color: #f9f9f9;
/* Padding memberikan 'padding' pada teks agar tidak mepet ke garis */
padding: 30px;
/* Border memberikan batas yang jelas */
border-left: 5px solid #2ecc71;
/* Margin menjauhkan kartu ini dari elemen lain di atas/bawahnya */
margin: 50px auto;
/* Menghaluskan sudut */
border-radius: 4px;
/* Menjaga lebar tetap 400px meskipun ada padding/border */
box-sizing: border-box;
}