Box Model

Memahami box model CSS secara mendalam: content, padding, border, margin, dan bagaimana keempatnya mempengaruhi layout.

Phase

Phase 2 — CSS

Topik

CSS Fundamentals

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Memahami komponen box model: content, padding, border, margin
02Memahami perbedaan box-sizing: content-box vs border-box
03Menggunakan shorthand: margin: 10px 20px
04Mengatur border: style, width, color, radius
05Memahami perbedaan outline vs border
06Menggunakan overflow: visible, hidden, scroll, auto

📖Sub-topik & Materi

01Komponen box model: content → padding → border → margin
02box-sizing: content-box (default) vs border-box (rekomendasi)
03Shorthand margin dan padding: top right bottom left
04Border: border-style, border-width, border-color, border-radius
05Outline vs border (outline tidak mempengaruhi layout)
06overflow: visible, hidden, scroll, auto

💡Penjelasan Konsep

Konsep 1

Box Model: Content, Padding, Border, Margin

Setiap elemen HTML adalah sebuah "kotak" dengan 4 lapisan dari dalam ke luar: Content (konten asli), Padding (jarak antara konten dan border), Border (garis tepi), Margin (jarak antara elemen dengan elemen lain). Penting: secara default, width hanya mengukur Content — padding dan border menambah lebar total!

css

.kartu {
  /* Konten */
  width: 300px;
  height: 200px;
  
  /* Padding: jarak konten ke tepi */
  padding: 20px;          /* semua sisi */
  padding: 10px 20px;     /* atas-bawah | kiri-kanan */
  padding: 5px 10px 15px 20px; /* atas | kanan | bawah | kiri */
  
  /* Border */
  border: 2px solid #ddd;
  border-radius: 12px;
  
  /* Margin: jarak ke elemen lain */
  margin: 16px;
  margin: 0 auto; /* centering horizontal */
}

Konsep 2

box-sizing: border-box — WAJIB di Setiap Project

Masalah default: jika width: 300px dan padding: 20px, lebar total jadi 340px (300 + 20 + 20) — merusak layout! Solusi: box-sizing: border-box membuat width SUDAH TERMASUK padding dan border. Selalu tambahkan ini di awal CSS untuk semua elemen.

css

/* Tambahkan SELALU di baris pertama CSS */
*, *: :before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Sekarang: width: 300px + padding: 20px = total tetap 300px */
.kartu {
  width: 300px;
  padding: 20px; /* tidak menambah lebar total */
}

Konsep 3

Shadow dan Border-radius untuk Kartu

box-shadow membuat bayangan di bawah elemen — memberi kesan "mengambang". Sintaks: x-offset y-offset blur spread color. border-radius membulatkan sudut. Gabungkan dengan :hover dan transition untuk efek interaktif yang halus.

css

.kartu {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kartu: hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

💻Contoh Kode Lengkap

css

/* Reset global — selalu taruh di awal CSS */
*, *: :before, *::after {
  box-sizing: border-box;
}

/* Kartu dengan box model lengkap */
.kartu {
  width: 300px;
  padding: 24px 20px;        /* top-bottom: 24px, left-right: 20px */
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  margin: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Hover effect */
.kartu: hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  transition: all 0.3s ease;
}

/* Debugging box model */
.debug * {
  outline: 1px solid red;     /* Lihat semua batas elemen */
}

⚡Latihan Kelas · Buat kartu (card) dengan padding, border-radius, dan shadow menggunakan box model

Tambahkan * { box-sizing: border-box; } di awal file CSS

Buat div.kartu dengan lebar 300px, padding 20px, dan border 1px

Tambahkan border-radius: 12px dan box-shadow

Buka DevTools > Elements > Computed > lihat box model visual

Uji: ubah box-sizing ke content-box dan amati perbedaan ukuran

📝 Tugas 3.3 — Box Model & Kartu Produk

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat halaman berisi 3 kartu produk (bisa produk apa saja) menggunakan box model yang konsisten. Setiap kartu harus punya: padding, border, border-radius, box-shadow, dan hover effect (transform + shadow berubah).

Kriteria Penilaian	Poin
box-sizing: border-box diterapkan secara global	20
Spacing (padding/margin) konsisten menggunakan CSS variables	25
Setiap kartu punya shadow, border-radius, dan border	30
Hover effect berfungsi (perubahan shadow/transform terlihat)	25
Total	100