Normal Flow and Display

Before you write a single line of layout, the browser has already arranged your page. Headings and paragraphs stack down the screen, each on its own line; words and links flow across a line and wrap onto the next. That default arrangement is called normal flow, and it is good. It fits any screen width without help, and most layout work is a small adjustment to it rather than a replacement.

Lined paper is the everyday version. Each new paragraph starts on a new line, and within a paragraph the words run along the line until they reach the edge and wrap. You only do something different when you want something different, like a heading in the margin. Normal flow is the browser's lined paper.

Block and Inline

Every element takes part in the flow in one of two main ways. A block element starts on a new line and stretches across the full width available to it, so blocks stack one under another. Paragraphs, headings, lists, section and div are blocks.

An inline element sits inside a line of text and is only as wide as its content. Links, strong, em and span are inline, which is why a link in the middle of a sentence does not break the sentence in two.

<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<a href="index.html">Home</a>
<a href="projects.html">Projects</a>
<a href="contact.html">Contact</a>

The browser shows the three paragraphs on three separate lines, one below the other, even though nothing asked for line breaks. The three links appear side by side on a single line, Home, Projects and Contact, separated by spaces, because inline elements flow like words.

Inline elements ignore width and height. Their size comes from the text inside them. Padding on an inline element is painted, but its top and bottom do not push the neighbouring lines apart. That surprises almost everyone the first time they try to make a link bigger.

Changing the Rules with display

The display property decides how an element takes part in the flow, and you can change it. display: block turns an inline element into a block; display: inline does the opposite. A third value, inline-block, is a mix: the element sits in a line like a word but accepts a width, a height and padding like a block.

.big-link {
  display: block;
  width: 12rem;
  padding: 1rem;
  background: lightblue;
}

Give one link the class big-link and this rule. Without the display line, the width does nothing: the link stays as wide as its text, and its blue padding spills over the lines above and below. With it, the link becomes a blue block 12 rem wide on a line of its own, and the whole block is clickable, not only the text. Swap block for inline-block and the blue block stays the same size but moves back into the line next to its neighbours.

Two more values change everything about how an element arranges its children: flex and grid. They are the next two topics.

Hiding Things, Two Ways

There are two common ways to hide an element, and they do different things. display: none removes the element from the page completely: it takes up no space, and the content around it closes up as if it were never there. visibility: hidden makes the element invisible but keeps its space, leaving a blank gap of exactly its size.

.removed {
  display: none;
}

.invisible {
  visibility: hidden;
}

Put the two classes on two paragraphs in a list of five. On screen, the removed one leaves no trace, while the invisible one leaves an empty paragraph-sized hole. In the Elements panel of DevTools both are still there in the HTML. Hover the removed one and nothing lights up on the page, because it has no box; hover the invisible one and the overlay outlines the empty space it still occupies.

Both ways also hide the element from screen readers. So neither is right for text that should be heard but not seen, such as a label for an icon-only button. That needs a third technique, usually a class called visually-hidden, which Chapter 12 builds and explains.

When Content Does Not Fit

A box with a fixed width can hold content bigger than itself. By default the browser does not cut the content off; it lets it spill out past the edge, which is called overflow. The overflow property changes that: hidden clips whatever sticks out, scroll always adds scroll bars, and auto adds them only when they are needed.

The most common overflow on real pages is a long web address or a long word. The browser only breaks a line at spaces and a few punctuation marks, so a long unbroken string has nowhere to wrap.

<p class="note">Photos:
  <a href="https://example.com/photos/summerholidayphotoalbum2026">https://example.com/photos/summerholidayphotoalbum2026</a>
</p>

.note {
  width: 10rem;
  border: 1px solid black;
  overflow-wrap: anywhere;
}

The paragraph is 10 rem wide with a thin border, and the link inside it shows its own address as its text. Without the last line of the rule, the address has no spaces to break at, so most or all of it runs straight out through the right-hand border. With overflow-wrap: anywhere, the browser is allowed to break the address at any character, and it wraps neatly inside the box. On a phone, where boxes are narrow, this one line prevents a whole page from scrolling sideways.