Section ini membahas display dan normal flow sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Normal Flow

Pahami algoritme tata letak default browser: kotak block menumpuk ke bawah, kotak inline mengalir ke samping, dan inilah fondasi semua layout CSS.

Buka → # Display: Block dan Inline

Bedah dua nilai display yang paling mendasar: block yang menempati baris sendiri dan inline yang mengalir bersama teks, lengkap dengan properti yang berlaku pada keduanya.

Buka → # Inline-Block

Kenali nilai hybrid display: inline-block — mengalir seperti inline, menerima ukuran dan padding seperti block, plus jebakan spasi antar elemen yang legendaris.

Buka → # Display None

Hapus elemen dari rendering sekaligus layout dengan display: none — perilaku penuhnya, dampaknya pada aksesibilitas, dan kapan pemakaian ini tepat.

Buka → # Visibility dan Opacity

Bandingkan tiga cara menyembunyikan elemen — display: none, visibility: hidden, dan opacity: 0 — dari sisi ruang layout, interaksi, aksesibilitas, dan transisi.

Buka → # Overflow dan Scrolling

Kendalikan perilaku scrolling secara penuh: scroll container, scroll-behavior: smooth, overscroll-behavior, scrollbar-gutter, dan kaitannya dengan position: sticky.

Buka → # Gap

Ganti trik margin yang penuh pengecualian dengan satu deklarasi gap: jarak seragam antar item di flex dan grid, tanpa masalah anak pertama dan terakhir.

Buka → # Formatting Context

Pahami block formatting context (BFC): wilayah layout mandiri yang menampung float dan memutus margin collapse, plus display: flow-root sebagai kuncinya.

Buka → # Memahami Alur Layout

Satukan seluruh materi section ini menjadi peta berpikir: urutan dari pohon dokumen ke piksel, strategi membaca layout asing, dan tabel diagnosis gejala umum.

Buka →