Box Model: Jantung Layout CSS
Pernahkah kamu bingung kenapa ada jarak antar tombol, atau kenapa sebuah elemen terlalu mepet dengan teks di
dalamnya? Jawabannya ada pada CSS Box Model.
Rahasia terbesar CSS adalah: Semua elemen HTML dasarnya berbentuk kotak (box). Mulai dari
teks link yang kecil sampai gambar yang besar, browser menganggap mereka sebagai sebuah kotak yang memiliki
4 lapisan pengukur. Memahami Box Model adalah kunci utama untuk mendesain layout website apapun.
📦 4 Lapisan Utama Box Model
Bayangkan elemen HTML sebagai sebuah lukisan berbingkai yang dipajang di dinding museum. Ada gambar utamanya, kanvas kosong, bingkai kayunya, dan jarak antara lukisan itu dengan lukisan lain.
Isi Konten
(Teks / Gambar)
1. Content (Isi)
Isi utama dari elemen. Bisa berupa teks, gambar, atau video. Ukurannya
diatur menggunakan properti width dan height.
2. Padding (Bantalan)
Area transparan yang memisahkan antara Content dan Border. Padding membuat konten tidak terlalu mepet ke garis tepi.
3. Border (Garis Tepi)
Garis yang mengelilingi padding dan konten. Bisa berupa garis solid, putus-putus, dan bisa diwarnai.
4. Margin (Jarak Antar Sekitar)
Area transparan di luar border. Fungsinya untuk mendorong/memberi jarak antara elemen ini dengan elemen lainnya di halaman.
⏱️ Menulis Padding & Margin dengan Cepat
Kamu bisa mengatur setiap sisi (Atas, Kanan, Bawah, Kiri) secara terpisah, atau menggunakan Shorthand (jalan pintas) agar kodenya lebih singkat.
.kotak {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}.kotak {
/* Aturan urutan: Atas Kanan Bawah Kiri (Arah Jarum Jam 🕐) */
padding: 10px 20px 10px 20px;
/* Jika ukurannya Atas-Bawah sama, dan Kiri-Kanan sama: */
padding: 10px 20px;
}- Aturan ini berlaku sama persis untuk penulisan
margin. - Jika hanya ditulis 1 angka (contoh:
margin: 15px;), artinya keempat sisinya akan bernilai 15px.
🖼️ Memberi Gaya pada Border
Border memiliki 3 komponen wajib: Ketebalan (width), Gaya garis (style), dan Warna (color). Kita umumnya menuliskannya langsung dalam satu baris (Shorthand).
.tombol-cantik {
/* Format: Ketebalan | Style | Warna */
border: 2px solid blue;
/* Agar sudutnya melengkung/tidak tajam */
border-radius: 8px;
}border: 4px solid
border: 4px dashed
border: 4px dotted
border: 4px double
🎮 Bedah Box Model secara Visual
Ubah slider di bawah ini untuk melihat bagaimana Padding (biru), Border (hitam), dan Margin (oranye) mempengaruhi ukuran fisik sebuah tombol.
Settings
padding: ;
margin: ;
border: ;
border-radius: ;
}
🚨 Penyakit Umum: Ukuran Elemen Membengkak
Ada satu hal dari CSS jaman dahulu yang sangat menyebalkan: Menambahkan Padding atau Border akan
menambah lebar (width) total elemen!
Contoh: Jika kamu pesan kasur ukuran 100cm, lalu ditambah padding/busa 10cm, lebar kasurnya jadi 120cm (100 +
kiri 10 + kanan 10). Ini membuat layout website sering berantakan dan menabrak ke mana-mana.
Solusi Wajib (Box-sizing: border-box)
Untuk mengatasinya, seluruh developer web sepakat untuk memasang "mantra gaib" ini di baris paling atas setiap file CSS mereka. Ini akan memaksa elemen mempertahankan dimensinya. Jika ada padding 10cm, maka area kontennya yang akan mengalah (menyempit), bukan kotaknya yang membesar.
/* * (Bintang) artinya: Terapkan ke SEMUA elemen HTML */
* {
box-sizing: border-box;
}📋 Ringkasan
* { box-sizing: border-box; }
di setiap proyek agar matematikamu kelak tidak berantakan gara-gara padding!