Section ini telah berkeliling dari normal flow, nilai display, penyembunyian elemen, scrolling, jarak, sampai formatting context. Saatnya menyatukan semuanya menjadi satu peta berpikir yang bisa dipakai di mana saja — saat menulis kode sendiri, membaca kode orang lain, atau membedah halaman di internet yang terlihat berantakan. Chapter ini adalah rangkuman diagnosis: urutan berpikir yang benar, strategi membaca layout asing, dan tabel gejala yang menunjuk ke penyebabnya.
Dari Pohon Dokumen ke Piksel #
Setiap halaman melewati urutan tahap yang sama sebelum tampil sebagai piksel. Urutan ini adalah kerangka mental inti section ini:
- Pohon dokumen: browser membaca HTML dan menyusunnya menjadi pohon elemen (DOM).
- Normal flow: aturan default bekerja lebih dulu — kotak block menumpuk vertikal, kotak inline mengalir dan patah baris.
- Display mengubah peran: nilai
displaypada tiap elemen menentukan kotaknya dihitung sebagai block, inline, inline-block, atau tidak dihitung sama sekali (none). - Box model memberi ukuran:
width/height,padding,border, danmarginmenyusut atau memperluas setiap kotak. - Pengubah layout bekerja terakhir:
float,position, serta container flex/grid menggeser, menumpuk, atau menggantikan penyusunan di dalam wadahnya.
Urutan ini menjelaskan kenapa memahami default itu wajib sebelum belajar teknik lanjutan: flex dan grid bukan titik awal, melainkan lapisan yang menimpa normal flow di dalam wadahnya.
Strategi Membaca Layout Asing #
Ketika menghadapi layout yang tidak kita tulis, resistensi terbesar adalah ingin memahami semuanya sekaligus. Lebih efektif bekerja berjenjang:
- Mulai dari container, bukan anak: periksa nilai computed
displaypada elemen pembungkus lewat panel DevTools — nilai ini menentukan aturan permainan untuk semua anaknya. - Identifikasi konteksnya: apakah isinya tersusun oleh normal flow, flex, grid, atau ada elemen ber-float di dalamnya? Panel Layout di DevTools memvisualkan pemisah flex/grid.
- Baru turun ke kotak: setelah penyusunan jelas, barulah periksa ukuran dan jarak lewat panel box model per elemen.
Dengan urutan ini, pertanyaan berubah dari “kenapa halamannya begini?” menjadi “container ini disusun oleh aturan apa, dan elemen mana yang menyimpang?”.
Demo berikut adalah halaman mini dari header, main, dan footer:
Setiap blok membawa catatan perilakunya sendiri — meniru cara kita seharusnya membaca layout di kepala.
Gejala Umum dan Diagnosisnya #
Tabel berikut merangkum gejala yang paling sering dilaporkan pemula, beserta penyebab dari section ini:
| Gejala | Kemungkinan penyebab | Langkah cek |
|---|---|---|
| Div turun ke baris bawah padahal ingin berdampingan | Elemen masih block dalam normal flow | Periksa display; pilih inline-block/flex sesuai kebutuhan |
| Celah antar elemen tanpa ada margin | Spasi HTML antar inline-block dirender sebagai spasi | Sambungkan markup, atau pakai flexbox plus gap |
| Konten menembus tepi kotaknya | overflow default visible | Atur overflow pada kotak pemiliknya |
| Tinggi induk nol padahal isinya ada | Float tidak tertampung oleh induk tanpa BFC | display: flow-root pada induk |
| Kotak sorot menimpa baris lain | Padding vertikal pada elemen inline | Ganti ke inline-block atau atur line-height |
| Jarak vertikal ikut hilang di ujung container | Margin collapse menembus batas | flow-root, padding, atau border sebagai pemisah |
Semua baris di tabel ini telah dibahas tuntas pada chapter-chapter sebelumnya — tabel ini fungsinya sebagai indeks cepat saat menghadapi gejala nyata.
Ringkasan #
Membaca layout adalah keahlian berjenjang: pahami pohon dokumen, biarkan normal flow menjadi asumsi awal, catat perubahan display dan box model, lalu kenali pengubah seperti float, position, flex, dan grid sebagai lapisan atas. Dengan peta itu, gejala yang tampak samar menunjuk langsung ke penyebabnya lewat tabel diagnosis di atas. Section Display dan Normal Flow sampai di sini; section berikutnya — Positioning — membahas cara paling langsung untuk melepaskan elemen dari alur dan menumpukkannya sesuai keinginan kita.