Sebelum mengenal flexbox dan grid, kita perlu memahami perilaku bawaan dokumen HTML. Section ini menjelaskan normal flow, perbedaan block dan inline, kontrol visibility, serta formatting contexts yang menjadi dasar semua layout CSS.

# Normal Flow

Pahami normal flow, alur tata letak bawaan browser tempat elemen block bertumpuk vertikal dan teks inline mengalir horizontal.

Buka → # Block dan Inline

Bandingkan perilaku elemen block dan inline terkait lebar, tinggi, margin, serta cara keduanya menempati baris.

Buka → # Inline-block

Kenali inline-block, tipe kotak hibrida yang mengikuti aliran teks namun menerima width, height, margin, dan padding secara penuh.

Buka → # Display None

Gunakan display: none untuk menyingkirkan elemen sepenuhnya dari render tree, tanpa jejak ruang, dan pahami dampaknya pada aksesibilitas.

Buka → # Visibility

Gunakan visibility: hidden untuk menyembunyikan elemen tanpa menggeser layout, pulihkan anak dengan visible, dan bandingkan tiga cara menyembunyikan.

Buka → # Replaced Elements

Kenali replaced elements seperti img dan input yang isinya berasal dari luar dokumen, lengkap dengan ukuran intrinsik dan rasio aspeknya.

Buka → # Formatting Contexts

Pahami block formatting context, cara membentuknya dengan flow-root, serta kegunaannya menghentikan margin collapse dan menampung float.

Buka →