Pertemuan 04 | CSS Box Model dan Flexbox

SLIDE 01

CSS BOX MODEL DAN FLEXBOX

PERTEMUAN 04Mengatur Ruang, Dimensi, dan Susunan ElemenMemahami kotak setiap elemen dan menyusun layout secara fleksibel.

DOSEN PENGAMPUI Kayan Herdiana, S.Kom., M.Kom.081 999 886 827

Petunjuk Praktikum Hasil Akhir Pertemuan 04

BOX

RUANG & DIMENSI

Box Model

Content, padding, border, margin, width, dan height.

FLEX

LAYOUT

Flexbox

Arah, distribusi, alignment, gap, dan wrapping item.

SLIDE 02

CAPAIAN PEMBELAJARAN PERTEMUAN 04

MEMAHAMI

01Anatomi CSS Box Model

02Dimensi dan box-sizing

03Block, inline, inline-block

04Flex container dan flex item

MEMPRAKTIKKAN

✓

Mengatur ruang kartu

✓

Menghitung ukuran elemen

✓

Menyusun navigasi

✓

Membuat layout responsif

SLIDE 03

MENGINGAT KEMBALI PERTEMUAN 03

Selector menentukan elemen, sedangkan property dan value menentukan tampilan.

01SelectorMemilih elemen HTML

→

02PropertyAspek yang diatur

→

03ValueNilai property

→

04HasilVisual berubah

review.css

.kartu { color: navy; background-color: white; font-family: Arial, sans-serif; }

SLIDE 04

DISKUSI PEMANTIK RUANG DAN SUSUNAN

Amati sebuah kartu profil. Ruang apa saja yang membuatnya terlihat rapi?

01

AMATIDi Dalam Elemen

AJarak teks dari tepi kartu

BUkuran foto dan area konten

CGaris yang membatasi kartu

02

DISKUSIKANAntarelemen

AJarak antarkartu

BPosisi foto dan teks

CPerubahan saat layar mengecil

WAKTU

Diskusikan selama 3-5 menit dan sebutkan bagian yang perlu diatur CSS.

SLIDE 05

SETIAP ELEMEN ADALAH KOTAK

CARA BROWSER MELIHAT

Kotak Persegi Panjang

Heading, paragraf, gambar, link, dan section memiliki area yang dapat diukur dan diatur.

UkuranRuang dalamBatasRuang luar

kartu.css

.kartu {
  width: 320px;
  padding: 24px;
  border: 2px solid navy;
  margin: 20px;
}

BOX

Walaupun tidak terlihat, setiap elemen tetap memiliki kotak layout.

SLIDE 06

ANATOMI CSS BOX MODEL

Lapisan Box Model dibaca dari bagian terdalam menuju bagian terluar.

01

C

ContentIsi utama elemen

Teks · Gambar

02

P

PaddingRuang di dalam

Content ↔ Border

03

B

BorderGaris pembatas

Mengelilingi padding

04

M

MarginRuang di luar

Jarak antarelemen

URUTAN

Content → Padding → Border → Margin

SLIDE 07

CONTENT AREA

ISI KOTAK

Content

Area tempat teks, gambar, atau elemen anak ditampilkan.

Lebar dipengaruhi width.
Tinggi dipengaruhi height.
Isi dapat menentukan ukuran otomatis.

DIATUR↔FLEKSIBEL

DIMENSI

Width & Height

content.css

.foto {
  width: 240px;
  height: 240px;
}

.kartu {
  width: 100%;
  max-width: 420px;
}

RESPONSIF

Gunakan max-width agar elemen tidak melewati batas yang diinginkan.

SLIDE 08

PADDING

RUANG DI DALAM

Content ↔ Border

Padding memberi napas agar isi tidak menempel pada tepi elemen.

1

Satu nilaiSemua sisi sama.

2

Dua nilaiVertikal lalu horizontal.

padding.css

.kartu {
  padding: 24px;
}

.tombol {
  padding: 12px 20px;
}

.panel {
  padding-top: 16px;
  padding-bottom: 24px;
}

INGAT

Padding memperbesar ruang di dalam kotak dan tetap memiliki background elemen.

SLIDE 09

BORDER

TIGA KOMPONEN

border-width menentukan ketebalan.
border-style menentukan bentuk garis.
border-color menentukan warna.
border-radius membulatkan sudut.

SHORTHAND

border: 2px solid navy;

border.css

.kartu {
  border-width: 2px;
  border-style: solid;
  border-color: #192a54;
  border-radius: 16px;
}

.catatan {
  border-left: 4px solid #ffad01;
}

VISUAL

Gunakan border untuk memperjelas batas, bukan untuk memenuhi semua elemen dengan garis.

SLIDE 10

MARGIN

RUANG DI LUAR

Border ↔ Elemen Lain

Margin memisahkan sebuah kotak dari kotak di sekitarnya.

margin-topmargin-rightmargin-bottommargin-left

margin.css

.kartu {
  margin-bottom: 24px;
}

.halaman {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}

h2 { margin: 0 0 16px; }

SLIDE 11

WIDTH DAN HEIGHT

DIMENSI ELEMEN

W

widthLebar elemen.

H

heightTinggi elemen.

MIN

min-widthBatas terkecil.

MAX

max-widthBatas terbesar.

dimension.css

.kartu {
  width: 90%;
  max-width: 420px;
  min-height: 180px;
}

.foto { width: 120px; height: 120px; }

RESPONSIF

Gunakan max-width agar elemen tidak melewati batas layar.

SLIDE 12

BOX SIZING: BORDER BOX

CONTENT-BOX

Ukuran Bertambah

Width hanya menghitung content. Padding dan border ditambahkan di luar ukuran.

CONTOH

300 + 40 + 4 = 344px

UBAH→MUDAH

BORDER-BOX

Ukuran Tetap

Width mencakup content, padding, dan border.

global.css

* { box-sizing: border-box; }

REKOMENDASI

Gunakan border-box sebagai aturan global proyek.

SLIDE 13

MARGIN COLLAPSING

Margin vertikal elemen block tertentu dapat bergabung. Browser memakai nilai yang lebih besar.

CONTOH

Amargin-bottom24px

↓

Bmargin-top16px

HASIL

24pxBukan 40px.

margin.css

.pertama { margin-bottom: 24px; }
.kedua { margin-top: 16px; }

SLIDE 14

AKTIVITAS MENGHITUNG UKURAN KOTAK

DATA CONTENT-BOX

01

Width300px

02

Padding20px setiap sisi

03

Border2px setiap sisi

?

TotalHitung bersama.

RUMUS

LEBARContent + Padding + BorderMargin tidak termasuk ukuran kotak.

JAWABAN

300 + 40 + 4 = 344pxTotal lebar elemen.

SLIDE 15

DISPLAY: BLOCK, INLINE, DAN INLINE-BLOCK

B

DISPLAY

Block

Memulai baris baru dan dapat memakai lebar penuh.

div
p
section

I

DISPLAY

Inline

Mengikuti aliran teks dan tidak memulai baris baru.

a
span
strong

IB

DISPLAY

Inline-block

Tetap sejajar tetapi menerima width, height, dan padding.

badge
tombol
label

SLIDE 16

MENGENAL FLEXBOX

Flexbox adalah sistem layout satu dimensi untuk menyusun item dalam baris atau kolom.

1ContainerElemen pembungkus

→

2Display FlexMengaktifkan layout

→

3ArahBaris atau kolom

→

4PosisiJarak dan alignment

flex.css

.daftar-kartu { display: flex; gap: 20px; }

SLIDE 17

FLEX CONTAINER DAN FLEX ITEM

CONTAINER

Elemen Induk

Elemen dengan display: flex mengatur anak langsungnya.

directionjustifyaligngap

menu.html + css

<div class="menu">
  <a href="#">Beranda</a>
  <a href="#">Profil</a>
  <a href="#">Kontak</a>
</div>

.menu { display: flex; gap: 16px; }

ITEM

Ketiga link menjadi flex item karena merupakan anak langsung .menu.

SLIDE 18

FLEX DIRECTION

Flex direction menentukan arah main axis dan urutan visual item.

01

→

rowKiri ke kanan

02

←

row-reverseKanan ke kiri

03

↓

columnAtas ke bawah

04

↑

column-reverseBawah ke atas

direction.css

.menu { display: flex; flex-direction: row; }

SLIDE 19

JUSTIFY CONTENT

Justify content mengatur distribusi item sepanjang main axis.

PADA FLEX-DIRECTION: ROW

01flex-startBerkumpul di awal.

02centerBerada di tengah.

03space-betweenRuang di antara item.

04space-aroundRuang di sekeliling item.

navigation.css

.navigasi { display: flex; justify-content: space-between; }

SLIDE 20

ALIGN ITEMS

Align items mengatur posisi item sepanjang cross axis.

NILAI UMUM

01

stretchMengikuti tinggi container.

02

flex-startBerada di bagian atas.

03

centerSejajar di tengah.

04

flex-endBerada di bagian bawah.

header.css

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
}

HASIL

Logo dan menu sejajarPosisi vertikal di tengah.

SLIDE 21

GAP PADA FLEXBOX

gap memberi jarak yang konsisten hanya di antara flex item.

DIBANDINGKAN MARGIN

01

Dipasang pada containerSatu aturan mengatur semua jarak item.

02

Tidak menambah tepi luarJarak muncul di antara item.

03

Mendukung baris dan kolomGunakan row-gap dan column-gap bila perlu.

cards.css

.daftar-kartu {
  display: flex;
  gap: 20px;
}

/* Baris 12px, kolom 24px */
.galeri { gap: 12px 24px; }

HASIL

Jarak tetap konsisten meskipun jumlah item berubah.

SLIDE 22

FLEX WRAP

flex-wrap: wrap memindahkan item ke baris berikutnya ketika ruang tidak cukup.

PERILAKU

1

Ruang tersediaItem tersusun pada satu baris.

↓

2

Layar menyempitLebar item mulai tidak cukup.

↓

3

Item turunLayout tetap terbaca.

cards.css

.daftar-kartu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.kartu {
  flex: 1 1 240px;
}

SLIDE 23

STUDI KASUS NAVIGASI

index.html

<header class="navigasi">
  <a class="logo" href="#beranda">Arya</a>
  <nav class="menu">
    <a href="#profil">Profil</a>
    <a href="#minat">Minat</a>
    <a href="#kontak">Kontak</a>
  </nav>
</header>

style.css

.navigasi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.menu { display: flex; gap: 20px; }

STRUKTUR

Logo dan nav menjadi flex item. Link di dalam nav diatur oleh flex container kedua.

SLIDE 24

STUDI KASUS KARTU PROFIL

index.html

<section class="kartu-profil">
  <img src="assets/images/foto.jpg"
       alt="Foto profil I Made Arya">
  <div>
    <h2>I Made Arya</h2>
    <p>Mahasiswa Bisnis Digital</p>
  </div>
</section>

style.css

.kartu-profil {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid #d7dce7;
}

.kartu-profil img { width: 120px; }

PEMBAGIAN TUGAS

Box Model mengatur ruang kartu. Flexbox mengatur posisi foto dan identitas.

SLIDE 25

FLEXBOX DAN RESPONSIVE DESIGN

LAYAR LEBAR

Susunan Baris

Foto dan informasi tampil berdampingan.

default

.kartu-profil {
  display: flex;
  flex-direction: row;
}

RUANG↔LAYOUT

LAYAR KECIL

Susunan Kolom

Foto dan informasi bertumpuk agar mudah dibaca.

media query

@media (max-width: 600px) {
  .kartu-profil {
    flex-direction: column;
  }
}

UJI

Kecilkan lebar browser dan amati kapan susunan berubah.

SLIDE 26

MEMERIKSA BOX MODEL DI DEVTOOLS

LANGKAH PEMERIKSAAN

01

Pilih elemenKlik kanan lalu pilih Inspect.

02

Buka panel ComputedLihat diagram content, padding, border, dan margin.

03

Periksa aturan aktifPanel Styles menunjukkan sumber setiap property.

04

Aktifkan overlay FlexboxKlik badge flex pada panel Elements.

YANG DICARI

BOX MODEL

Ukuran aktualApakah width sesuai perhitungan?

FLEXBOX

Axis dan gapApakah item sejajar dan tidak meluap?

STYLES

Aturan tertimpaCoretan menandai property yang kalah.

PRAKTIKUM P04-01

KARTU DENGAN BOX MODEL

EDIT FILE

style.css

TARGET

.kartu-profil

WAKTU

12 menit

HASIL

Kartu terukur

TUGAS

01
Gunakan border-boxTerapkan sebagai aturan global.
02
Atur lebar kartuGunakan width dan max-width.
03
Beri ruang dalamTambahkan padding 24px.
04
Tambahkan batasGunakan border dan border-radius.

style.css

* { box-sizing: border-box; }

.kartu-profil {
  width: 90%;
  max-width: 720px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #d7dce7;
  border-radius: 16px;
}

PRAKTIKUM P04-02

NAVIGASI FLEXBOX

EDIT FILE

style.css

LANJUTKAN

P04-01

WAKTU

10 menit

HASIL

Menu sejajar

TUGAS

01
Pilih headerGunakan class navigasi.
02
Aktifkan FlexboxTambahkan display flex.
03
Pisahkan logo dan menuGunakan space-between.
04
Sejajarkan vertikalGunakan align-items center.

style.css

.navigasi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.menu {
  display: flex;
  gap: 20px;
}

PRAKTIKUM P04-03

DAFTAR KARTU RESPONSIF

EDIT FILE

index.html + style.css

FOKUS

wrap dan gap

WAKTU

15 menit

HASIL

Kartu membungkus

TUGAS

01
Buat pembungkus kartuGunakan class daftar-kartu.
02
Tambahkan tiga kartuIsi dengan minat mahasiswa.
03
Aktifkan wrapItem boleh pindah baris.
04
Uji layar kecilPastikan tidak ada overflow.

style.css

.daftar-kartu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.kartu-minat {
  flex: 1 1 220px;
  padding: 20px;
  border: 1px solid #d7dce7;
}

PRAKTIKUM P04-04

TANTANGAN LAYOUT HALAMAN PROFIL

EDIT PROYEK

Pertemuan 02–04

FOKUS

Integrasi layout

WAKTU

20 menit

HASIL

Profil responsif

TARGET HALAMAN

01

Header dan navigasiLogo serta menu tersusun dengan Flexbox.

02

Kartu profilFoto dan identitas sejajar pada layar lebar.

03

Daftar minatKartu memakai wrap dan gap.

04

FooterJarak dalam dan luarnya konsisten.

SYARAT SELESAI

✓

Tidak ada scroll horizontal

✓

Box sizing menggunakan border-box

✓

Gap konsisten antarkomponen

✓

Layout tetap terbaca pada layar kecil

PERSONALISASI

Gunakan identitas, foto, minat, warna, dan isi milik sendiri.