Display & Normal Flow

Before you can control layout, you need to understand what happens when you do nothing. Browsers have a built-in system for placing elements on a page. It is called normal flow — and it is not random. It follows two simple rules based on an element’s default display type.

Block vs inline

Every HTML element is either a block or an inline element by default.

Block elements behave like stacked horizontal shelves. Each one takes up the full width available, and a new one always starts on a new line — regardless of how short its content is. Think of them as Figma frames with “Fill container” width and “Hug contents” height, stacked vertically in auto-layout.

Examples: <div>, <p>, <h1>–<h6>, <section>, <article>

Inline elements flow with text. They sit side-by-side and only take up as much width as their content requires. They do not break onto a new line. Think of them as individual text runs or icons inside a line of text.

Examples: <span>, <a>, <strong>, <em>, <img>

The display property

You can override any element’s default behaviour with the display property:

Value	What it does
block	Full-width shelf, starts on a new line
inline	Flows with text, no width/height control
inline-block	Flows with text, but you can set width and height
flex	Activates Flexbox on the children
grid	Activates Grid on the children
none	Hides the element completely (not just invisible — removed from layout)

The editable example below has a mix of block and inline elements. Try changing .label from display: inline to display: inline-block and add width: 100px — notice how you can now control its size. Then try display: block to see it jump to its own line.

HTMLCSS

<p>This is a <span class="label">block</span> paragraph. It fills the full width.</p> <p>This is another <span class="label">inline</span> paragraph. Notice they stack.</p> <span class="label">I am inline.</span> <span class="label">So am I.</span> <span class="label">We sit side by side.</span>

💡 inline-block is the in-between

inline-block is incredibly useful for navigation links, tags, and badge components. They flow naturally inside text like inline elements, but you can give them exact padding, width, and height like block elements. You will use it constantly for UI chips and labels.

Why this matters for layout

When you reach for Flexbox or Grid, you are replacing the normal-flow rules for that element’s children. The display property is the on/off switch. Understanding what normal flow looks like makes it immediately obvious why adding display: flex to a container changes everything — you are opting out of the default stacking rules.

Common mistakes designers run into

• Setting position: absolute on every element instead of letting normal flow do the work, breaking responsive layout entirely
• Not realizing an inline element doesn’t accept width/height directly until it becomes inline-block or block

The developer’s perspective

👨‍💻 What developers actually see

Designers see “an element floating here,” but developers see that the default display (block/inline) already decides how elements flow next to each other, with no extra code needed.

💡 Real-world example

A block-based editor that lets content grow or shrink with the amount of text is just relying on normal flow (stacked block-level elements) as its foundation — no absolute positioning required.

What does a block element do by default?

Sits next to other elements on the same line Takes up the full available width and starts on a new line Becomes invisible Floats to the right side of the page

Which display value lets an element flow with text AND accept a fixed width?

block inline inline-block none

What does `display: none` do?

Makes the element transparent Removes the element from the layout entirely Moves it off-screen to the left Converts it to a block element

Which of these is an inline element by default?

<div> <p> <section> <span>

Submit

Mark as complete