What you'll learn
Welcome to Phase 4 — layout, the part of CSS that arranges elements on the page. Before the powerful tools (Flexbox and Grid), you need to understand the default behaviour they build on: normal flow and the display property.
By the end you'll be able to:
- Explain how normal document flow lays out elements
- Distinguish block, inline, and inline-block boxes
- Change layout behaviour with
display - Hide elements the right way for the situation
Normal flow
Before you write a single layout rule, the browser already arranges everything using normal flow: block elements stack vertically down the page, and inline elements sit side by side within a line, wrapping like words in a paragraph. Every layout technique is really just a way of adjusting or overriding this default flow — so it pays to understand it.
Block vs inline
The two fundamental box types behave very differently:
- Block boxes (
div,p,h1,section) start on a new line, take the full available width, and respect all width, height, and margin settings. - Inline boxes (
span,a,strong) flow within text, take only as much width as their content, and ignore width, height, and top/bottom margins.
The display values
The display property changes a box's type. Beyond block and inline, inline-block is the useful hybrid — it flows in a line yet respects width, height, and vertical padding (great for nav items or buttons that sit side by side but need size):
/* Block: stacks vertically, fills the width */
p { display: block; }
/* Inline: flows within a line, ignores width/height */
a { display: inline; }
/* Inline-block: flows inline but respects box dimensions */
.badge { display: inline-block; width: 80px; }
/* None: removed from the page entirely */
.hidden { display: none; }Note
display values — flex and grid — get their own modules next. They turn an element into a layout container that arranges its children in sophisticated ways. Everything in this module is the foundation they stand on.Hiding elements
There are two ways to hide something, and the difference matters:
display: none— removes the element completely. It takes up no space, as if it weren't there.visibility: hidden— hides the element but keeps its space reserved, leaving a gap.
Watch out
display: none also hides content from screen readers, which is usually what you want for truly removed content — but not for something only visually hidden that should still be announced. For that, use a dedicated "visually-hidden" technique rather than display: none.Recap & quick check
Key takeaways
- Normal flow stacks block elements vertically and lays inline elements side by side.
- Block boxes fill the width and respect all dimensions; inline boxes ignore width/height and vertical margins.
- inline-block flows in a line but respects box dimensions — ideal for side-by-side sized items.
- display: none removes an element entirely; visibility: hidden hides it but keeps its space.
- flex and grid are display values that create powerful layout containers (coming next).
Quick check
1. In normal flow, how do block elements arrange themselves?
2. Which does an inline element ignore?
3. Which display value flows inline yet respects width and height?
4. What's the difference between display:none and visibility:hidden?
5. Which two display values create layout containers (covered next)?
You understand the default now — time to take control. Next up is the first great layout tool: positioning.