Before you can lay out a page, you need to feel how elements naturally arrange themselves — the document flow. Here's the mental model that makes it click: think of the page as a stream of water flowing down. Some elements are big rocks that the water flows around; others are small leaves drifting along in a line. The display property decides which is which.
1Block vs inline — rocks and leaves
Every element has a default display:
| display | In the water… | Behaviour |
|---|---|---|
| block | a rock — water flows around it, top to bottom | Starts on a new line, takes the full width available. E.g. <div>, <p>, <h1>. |
| inline | a leaf — drifts along in the current, left to right | Sits in the line of text, only as wide as its content; width/height are ignored. E.g. <a>, <strong>, <span>. |
| inline-block | a leaf you can resize | Flows in the line like inline, but you can set width, height, margins. Great for buttons in a row. |
width on a <span> seems to "do nothing" — inline elements ignore it. Switch it to inline-block (or block) and the width applies.- block elements start a new line and take full width (div, p, h1).
- inline elements sit within a line and ignore width/height (a, span, strong).
- inline-block flows inline but accepts width, height and margins.
2Changing and removing display
You can override an element's default with the display property — turn a list of links into a horizontal row, or a span into a block. You'll do this constantly.
Hiding elements
Two ways to hide something, with an important difference:
display: none— removes the element completely. It takes up no space; the flow closes up as if it were never there.visibility: hidden— makes it invisible but it still occupies its space, leaving a gap.
display: none most of the time (e.g. hiding a mobile menu). Use visibility: hidden only when you specifically need to keep the empty space reserved.Coming next: display: flex and display: grid — special display values that turn an element into a powerful layout container. They're the modern way to arrange the water entirely.
- Set the
displayproperty to override an element's default (e.g. make links sit in a row). display: noneremoves the element and its space entirely.visibility: hiddenhides it but keeps its space — leaving a gap.display: flexanddisplay: gridturn an element into a layout container (next lessons).
★ Practical: feel the flow
In any playground, experiment until you can predict the result:
- Make two
<div>s and confirm they stack (block). - Make two
<span>s and confirm they sit in a line (inline). - Give a span
display: inline-blockand a width, and watch the width now apply. - Hide one element with
display: noneand note the gap closes up.
Ready to test yourself?
Take the short quiz. Score 60% or more to mark this lesson complete.
Start the quiz →💡 Log in to save your progress and earn the certificate.