Halo teman-teman semuanya, di materi sebelumnya kita sudah mengenal properti CSS dasar seperti color, font, dan background. Nah, sekarang kita akan membahas salah satu konsep paling penting dalam CSS, yaitu Box Model.
Dengan memahami Box Model, kita bisa mengatur ruang, batas, dan jarak antar elemen dengan lebih presisi.
Apa Itu Box Model?
Setiap elemen HTML pada dasarnya dianggap sebagai sebuah kotak (box) oleh CSS. Box Model terdiri dari 4 lapisan:
- Content – isi dari elemen (teks, gambar, dll)
- Padding – jarak antara isi dan batas elemen
- Border – garis yang membungkus padding dan konten
- Margin – jarak antar elemen satu dengan yang lain
Gambaran singkat:
+----------------------------+
| Margin |
| +---------------------+ |
| | Border | |
| | +--------------+ | |
| | | Padding | | |
| | | +---------+ | | |
| | | | Content | | | |
| | | +---------+ | | |
| | +--------------+ | |
| +---------------------+ |
+----------------------------+
1. Padding: Jarak antara konten dan batas
p {
padding: 20px;
}
Artinya: semua sisi dalam elemen <p> diberi jarak 20px dari teks ke tepi.
2. Border: Garis di sekeliling elemen
p {
border: 2px solid black;
}
Kita bisa mengatur:
- width: ketebalan (contoh:
2px)
- style: gaya garis (
solid, dashed, dotted, dll.)
- color: warna
3. Margin: Jarak antar elemen
p {
margin: 16px;
}
Memberi jarak luar elemen ke elemen lain di sekitarnya.
Penulisan Singkat (Shorthand)
Kita bisa menuliskan padding, margin, atau border sekaligus semua sisi:
padding: 10px 20px; /* atas-bawah: 10px, kiri-kanan: 20px */
margin: 10px 15px 5px 0; /* top right bottom left */
Contoh Lengkap
Contoh berikut menunjukkan penggunaan lengkap dari box model: padding, border, dan margin untuk mengatur tampilan sebuah kotak paragraf.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Box Model</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.kotak {
background-color: #ffffff;
padding: 20px; /* jarak isi ke tepi */
border: 2px solid #3498db; /* garis tepi */
margin: 30px auto; /* jarak luar */
width: 300px;
}
</style>
</head>
<body>
<div class="kotak">
<p>Ini adalah contoh penggunaan box model dalam CSS.</p>
</div>
</body>
</html>
Elemen <div class="kotak"> di atas diberi latar putih, diberi jarak dalam (padding) 20px, garis tepi (border) biru setebal 2px, dan jarak luar (margin) 30px dari elemen lain. Ukurannya diatur lebar 300px agar terlihat seperti kotak.
Kesimpulan
Konsep Box Model sangat penting dalam CSS karena semua elemen diperlakukan sebagai kotak. Kita bisa mengatur jarak dalam elemen dengan padding, membuat garis tepi menggunakan border, dan memberi ruang antar elemen dengan margin.
Di artikel berikutnya, kita akan membahas tentang Text Styling seperti text-align, font-style, dan line-height, agar teks kita tidak hanya bagus secara warna dan ukuran, tapi juga rapi dan nyaman dibaca.
Terima Kasih