Understand how elements occupy space.

• block
• inline
• inline-block
• none
• flow
• margin collapse
• visibility

Compare display modes on three elements and document the layout difference.

• Open the result in a browser and inspect the HTML and computed CSS.
• Test at narrow and wide widths and use the keyboard for interactive elements.
• Write down one thing you changed after testing.

Normal flow is the browser's default layout: block boxes stack and inline content flows within lines. Display changes box behavior. Inline-block accepts box dimensions while staying in inline flow. Display:none removes an element from layout and the accessibility tree; visibility:hidden keeps its space but hides it. Adjacent vertical margins can collapse in normal flow.

Use display:none only when content really should be unavailable. Spacing surprises often come from normal flow or margin collapse, not from a browser bug.

Create two blocks and two inline elements. Toggle their display values one at a time, inspect dimensions, and explain how following content moves.

• Rebuild the core idea without copying the example line by line.
• Explain the key HTML or CSS choice in your own words.
• Test the result at a narrow width and with keyboard navigation where relevant.

Open example.html in a browser. Edit style.css, save, and refresh.

Try: Change one inline-block to inline and compare its width behavior.