Pertemuan 5-6: CSS Box Model

Konsep Fundamental untuk Layout dan Spasi

Pengertian

CSS Box Model adalah konsep fundamental yang harus dipahami setiap pengembang web. Konsep ini menyatakan bahwa setiap elemen HTML pada dasarnya adalah sebuah "kotak" persegi. Kotak ini terdiri dari empat bagian: Content (isi: teks, gambar), Padding (ruang di antara konten dan border), Border (garis tepi), dan Margin (ruang di luar border, antara elemen ini dengan elemen lain).

Analogi

Analogi: Lukisan Berbingkai di Dinding
Bayangkan sebuah lukisan yang digantung di dinding.
• Content: Adalah lukisan itu sendiri.
• Padding: Adalah karton putih (passe-partout) di antara lukisan dan bingkai.
• Border: Adalah bingkai kayu itu sendiri.
• Margin: Adalah jarak kosong di dinding antara bingkai lukisan ini dengan bingkai lukisan lainnya.

Contoh Kode & Hasil

1. Padding

Memberi ruang di dalam elemen.

Konten ini memiliki jarak 20px dari bordernya.
.box-padding {
  padding: 20px; /* 20px di semua sisi */
}

2. Margin

Memberi ruang di luar elemen.

Kotak ini punya jarak 20px di bawahnya.
Kotak kedua.
.box-margin {
  margin-bottom: 20px; /* Hanya memberi jarak di bawah */
}

3. Width & Height

Mengatur ukuran area konten.

.box-ukuran {
  width: 200px;
  height: 100px;
  /* Ukuran total lebar: 200px (width) + 20px (padding) + 2px (border) = 222px */
}

4. Shorthand (Penyingkatan)

Menulis properti untuk semua sisi sekaligus.

Padding atas/bawah 10px, kanan/kiri 20px.
.box-shorthand {
  /* padding: atas/bawah | kanan/kiri */
  padding: 10px 20px;
  
  /* margin: atas | kanan | bawah | kiri */
  margin: 10px 5px 15px 20px;
}

5. Properti box-sizing: border-box

Properti ini mengubah cara kerja box model. Dengan border-box, width dan height yang kita tentukan sudah termasuk padding dan border, sehingga perhitungan layout menjadi jauh lebih mudah.

Lebar total tetap 200px.
.box-modern {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  /* Ukuran total lebar tetap 200px, area kontennya yang menyempit */
}

Latihan Mandiri

Tugas: Membuat Tombol Kustom

  1. Buat sebuah elemen <a> (link) dan beri class .tombol-custom.
  2. Hilangkan garis bawahnya (text-decoration: none).
  3. Beri background-color biru dan color teks putih.
  4. Gunakan padding untuk memberikan ruang di dalam tombol (misal: 10px atas-bawah, 20px kanan-kiri).
  5. Gunakan margin untuk memberikan jarak 15px dari elemen lain di sekitarnya.
  6. Beri border solid 2px dengan warna biru tua dan border-radius 5px.

Kesimpulan

CSS Box Model adalah konsep paling fundamental dalam layouting web. Memahami bagaimana margin, border, padding, dan content bekerja bersama akan memungkinkan kita untuk mengontrol ukuran dan posisi elemen dengan presisi. Menggunakan box-sizing: border-box adalah praktik modern yang sangat direkomendasikan untuk menyederhanakan perhitungan layout.