Pertemuan 4 – Box Model dan Layout dengan CSS

← Kembali ke Beranda

Tujuan Pembelajaran

Mahasiswa mampu memahami konsep box model CSS, menerapkan margin, padding, border untuk kontrol spasi, dan menggunakan CSS Grid untuk layout halaman yang terstruktur dan responsif.

Box Model CSS: Konsep Dasar

Setiap elemen HTML adalah "box" dengan lapisan: content (isi), padding (ruang dalam), border (garis), margin (ruang luar). Bayangkan box sebagai kotak surat: content adalah surat, padding adalah bantalan dalam, border adalah amplop, margin adalah jarak ke kotak lain. Box model penting untuk layout akurat, menghindari elemen bertumpuk.

Properti: margin (luar), padding (dalam), border (garis tebal/warna/style). Gunakan box-sizing: border-box; agar width termasuk padding/border.

Penerapan Box Model

  • Margin: Jarak luar, contoh margin: 10px; (semua sisi) atau margin-top: 20px;.
  • Padding: Ruang dalam, padding: 15px; untuk spasi teks dari border.
  • Border: Garis, border: 1px solid black; untuk outline.

Langkah: 1) Reset box-sizing, 2) Atur margin/padding per elemen, 3) Tambah border untuk visual.

CSS Grid untuk Layout

CSS Grid adalah sistem layout 2D untuk grid-based design. Lebih powerful dari Flexbox untuk layout kompleks. Definisikan grid di parent, lalu posisi child dengan grid-column/grid-row. Cocok untuk halaman responsif.

Properti: display: grid;, grid-template-columns: 1fr 2fr; (kolom), grid-gap: 10px; (jarak).

Contoh Kode

/* Box Model */
.box {
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    box-sizing: border-box; /* Include padding/border in width */
}

/* CSS Grid */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 kolom sama */
    grid-gap: 15px;
}

.grid-item {
    background: lightblue;
    padding: 10px;
}

Tips Praktis

  • Gunakan dev tools untuk inspect box model elemen.
  • Grid untuk layout utama, Flexbox untuk komponen kecil.
  • Hindari margin collapse dengan padding.

Ringkasan

Box model kontrol spasi elemen, Grid buat layout terstruktur. Kombinasi ini buat web rapi dan responsif.

Latihan

1. Buat halaman dengan box model: div dengan padding, border, margin. 2. Implementasi grid 3x3 untuk galeri gambar. 3. Test responsivitas di mobile.