Belajar CSS - Box Model, Margin, Padding, Border, dan Sizing
Setiap elemen HTML adalah sebuah kotak. Episode ini membedah empat lapisan box model — content, padding, border, dan margin — plus cara mengatur ukuran kotak. Kalian akan memahami mengapa box-sizing border-box menjadi standar modern.
#Pendahuluan
Setiap elemen di halaman web — paragraf, gambar, atau tombol — pada dasarnya adalah sebuah kotak yang tersusun dari empat lapisan: content (isi), padding (ruang dalam), border (bingkai), dan margin (jarak luar). Episode ini membedah keempat lapisan itu, ditambah properti sizing untuk mengatur dimensi kotak. Sebagian besar masalah "elemen tidak rapi" berakar pada kesalahpahaman box model.
#Empat Lapisan Box Model
#Anatomi Sebuah Kotak
Dari dalam ke luar: content (isi elemen), padding (ruang antara content dan border), border (garis pembatas), dan margin (jarak dari elemen lain). Semua lapisan kecuali margin ikut dihitung dalam ukuran visual elemen.
#Shorthand dan Sisi
.box {
padding: 16px;
margin: 20px;
}
.box-lain {
padding: 8px 16px;
margin: 10px 20px 30px 40px;
}
.kartu {
padding-top: 24px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 32px;
}Satu nilai berlaku untuk semua sisi, dua nilai berarti atas-bawah lalu kiri-kanan, dan empat nilai mengikuti arah jarum jam. Properti per sisi seperti padding-top berguna bila hanya satu sisi yang butuh jarak.
#Border
#Lebar, Gaya, dan Warna
Border membutuhkan tiga komponen:
.alert {
border: 2px solid #dc2626;
border-radius: 8px;
padding: 12px;
}
.card {
border-width: 1px;
border-style: solid;
border-color: #e5e7eb;
}border shorthand menetapkan lebar, gaya, dan warna sekaligus; border-radius melengkungkan sudut hingga lingkaran penuh (50%).
#Border Satu Sisi
.tab {
border-bottom: 3px solid #2563eb;
}
.sidebar {
border-left: 4px solid #f59e0b;
padding-left: 12px;
}Border satu sisi sangat umum untuk tab aktif dan elemen penekanan.
#Sizing: Mengatur Ukuran Kotak
Properti width dan height menentukan dimensi:
.column {
width: 300px;
height: 150px;
}
.half {
width: 50%;
}
.teks {
max-width: 70ch;
min-height: 200px;
}
.wadah {
width: 90%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}Nilai persen dihitung relatif terhadap lebar parent; dengan content-box, width belum mencakup padding dan border. margin: auto pada kiri dan kanan membagi sisa ruang secara merata.
#box-sizing dan Perubahannya
* {
box-sizing: border-box;
}
.kotak {
width: 200px;
padding: 20px;
border: 1px solid #000;
}Default content-box membuat ukuran visual = width + padding + border, sehingga 200px menjadi 242px. Dengan border-box, nilai yang ditulis adalah ukuran total kotak — itulah mengapa hampir semua framework modern mengadopsinya sebagai reset awal.
#Latihan: Layout Dua Kartu
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="kartu"><h2>Kartu</h2><p>Konten.</p></div>
<div class="kartu"><h2>Kartu</h2><p>Konten.</p></div>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
background-color: #f1f5f9;
padding: 32px;
}
.kartu {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
}Jalankan npx serve . untuk melihat bagaimana border, padding, dan margin membentuk ruang di sekitar konten.
#Kesalahan Umum dan Solusinya
Margin collapse: margin vertikal dua elemen bersebelahan runtuh menjadi yang terbesar — pakai padding pada parent atau beri jarak hanya pada satu sisi.
Ukuran meleset: hampir pasti box-sizing belum border-box; tambahkan reset universal di awal stylesheet.
Margin auto tidak memusatkan: margin: auto hanya memusatkan horizontal pada elemen blok dengan lebar yang sudah ditetapkan.
#Penutup
Inti yang harus dibawa pulang:
- Box model terdiri dari content, padding, border, dan margin.
- Shorthand padding dan margin mengikuti pola satu, dua, atau empat nilai.
- Border membutuhkan lebar, gaya, dan warna;
border-radiusmembulatkan sudut. max-widthdanmin-heightmembuat ukuran lebih fleksibel.margin-left: autodanmargin-right: automemusatkan elemen blok.box-sizing: border-boxadalah standar modern agar ukuran mudah diprediksi.
Di episode 5 selanjutnya kita akan membahas display, visibility, dan positioning dasar — bagaimana elemen ditampilkan dan ditempatkan dalam halaman. Konsep block, inline, dan position ini menjadi jembatan menuju layout modern di fase kedua.