Model CSS: Margin, Border, Padding, dan Konten (Box Model)
Dalam dunia front-end development, kemampuan memahami bagaimana elemen tampil dan terukur pada halaman adalah pondasi utama untuk membangun antarmuka web yang menarik dan responsif. CSS Box Model hadir sebagai konsep dasar yang menjelaskan struktur penyusun setiap elemen HTML dalam bentuk kotak yang terdiri atas empat lapisan: content, padding, border, dan margin.
Memahami cara kerja Box Model sangat penting, karena ia menentukan bagaimana lebar dan tinggi total dari sebuah elemen dihitung, serta bagaimana jarak antar elemen diatur. Kesalahan dalam memahaminya sering menyebabkan elemen meluber, tampilan menjadi berantakan, ataupun jarak tak sesuai harapan.
1. Content (Konten) – Isi Utama Elemen
Content merupakan bagian terdalam dari Box Model, yaitu area tempat elemen menampilkan isinya, seperti teks, gambar, video, atau komponen HTML lainnya. Ukuran konten dapat diatur menggunakan properti seperti width, height, font-size, dan line-height. Saat kita memberikan nilai pada width atau height suatu elemen, nilai tersebut secara default hanya menentukan batas konten, tanpa menghitung padding maupun border.
Contoh sederhana:
div {
width: 300px; /* hanya area content */
height: 200px;
}
2. Padding – Jarak antara Konten dengan Border
Padding adalah ruang kosong yang mengelilingi konten. Fungsi utama padding ialah memberi jarak agar isi sebuah elemen tidak mepet langsung ke garis pinggirnya (border). Padding dapat diatur secara keseluruhan atau per sisi (atas, kanan, bawah, kiri). Jika sebuah elemen memiliki padding, maka ia akan menambah ukuran total elemen kecuali kita menerapkan box-sizing: border-box.
.box {
padding: 20px; /* semua sisi */
padding-top: 25px; /* sisi atas saja */
padding-left: 10px; /* sisi kiri saja */
}
3. Border – Garis Bingkai Mengelilingi Padding
Border adalah garis yang membungkus padding dan konten. Border digunakan untuk membuat batas visual antar elemen, menegaskan grup elemen, mempercantik tampilan, ataupun membentuk elemen seperti tombol atau kartu. Border memiliki tiga properti utama: ketebalan (border-width), gaya garis (border-style seperti solid, dashed, dotted), dan warna (border-color). Border juga dapat diberi sudut membulat menggunakan border-radius.
.card {
border-width: 3px;
border-style: solid;
border-color: #000;
border-radius: 8px;
}
Border termasuk ke dalam perhitungan ukuran total elemen.
4. Margin – Ruang Luar antar Elemen
Margin adalah ruang paling luar dari Box Model, berfungsi memisahkan satu elemen dengan elemen lain di sekitarnya. Tidak seperti padding yang memberi jarak ke dalam, margin menciptakan jarak keluar. Margin dapat diatur khas per sisi, dan tidak memiliki warna karena memang bersifat kosong.
.card {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
}
Hal penting dalam margin adalah fenomena margin collapsing. Ketika dua elemen blok berada dalam urutan vertikal dan marginnya saling bersentuhan (misalnya margin-bottom elemen pertama bertemu margin-top elemen kedua), keduanya tidak dijumlahkan, tetapi hanya margin yang lebih besar yang diterapkan.
5. Perhitungan Ukuran Total Elemen (Box Sizing)
Secara default, CSS menggunakan model content-box, di mana nilai width dan height hanya mencakup area konten:
Total width = width + padding kiri + padding kanan + border kiri + border kanan + margin kiri + margin kanan
Total height = height + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah
Karena sering merepotkan menghitung manual ukuran total elemen, CSS menyediakan mode alternatif border-box melalui properti box-sizing, di mana nilai width dan height sudah termasuk padding dan border. Ini sangat memudahkan dalam membangun layout responsif.
* {
box-sizing: border-box;
}
6. Visualisasi Box Model
┌─────────────────────────────┐ ← margin
│ ┌─────────────────────────┐ │ ← border
│ │ ┌─────────────────────┐ │ │ ← padding
│ │ │ CONTENT │ │ │ ← konten
│ │ └─────────────────────┘ │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘
7. Implementasi dalam Layout Website
Berikut contoh sederhana penggunaan Box Model dalam komponen layout:
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }
.container {
width: 800px;
padding: 20px;
border: 4px solid #333;
margin: 40px auto;
background-color: #f2f2f2;
}
.item {
width: 200px;
padding: 15px;
border: 2px dashed #3498db;
margin: 10px;
float: left;
background-color: #e8f4fd;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Elemen Satu</div>
<div class="item">Elemen Dua</div>
<div class="item">Elemen Tiga</div>
</div>
</body>
</html>
