Display and normal flow

Introduction

Before any layout rules are applied, a browser already has a plan for your page, called normal flow. Understanding it matters, because every layout tool you learn from here on either works with it or deliberately opts out of it, and much CSS trouble comes from fighting it without realising.

How it works

Block and inline. Every element has a display type with a default value.

Elements like p, div and h1 are blocks, and they stack downward. Elements like a, span and strong are inline, and they sit inside lines of text. display lets you change this, which is how a vertical list becomes a horizontal menu.

Changing display affects only how a box is laid out and never what it means. A list is still a list when its items are displayed in a row.

inline-block is a hybrid. It flows like text but accepts a width, height and margins like a block. It is the right tool for small things that should sit in a line, like tags and badges. One known quirk is that the whitespace between elements in your HTML shows up as a small gap.

Hiding things. The three common methods behave very differently.

Sometimes you need text to be available only to screen readers, such as a label for an icon. For that there is a well-known pattern which shrinks the element to one pixel and clips it, usually in a class called sr-only.

Floats. float: left moves a box to the left side, and following text wraps around it, like an image in a magazine. A long time ago developers built entire page layouts with floats, and you may see that in old code. Flexbox and grid replaced that use. A float does not push its parent taller, and clear: both makes an element start below any floats.

Syntax

nav li { display: inline-block; }
.hidden { display: none; }
img.left { float: left; margin-right: 12px; }

Example

Line by line

1. list-style: none removes the bullets, and padding: 0 removes the default indent.
2. inline-block lays out the items in a row, while keeping their padding.
3. visibility: hidden hides the word but keeps a gap where it was.
4. display: none removes the second word entirely, so no gap is left.

Expected result

Three pale boxes in a single row. Below them, "Before", a blank gap, "after, and" and "end." follow one another.

In the real world

Navigation menus and drop-downs depend on display. Modal windows and menus are commonly shown and hidden with display: none, because hidden content must also disappear for keyboard users and screen readers.

Common mistakes

• Giving width to an inline element and wondering why nothing changes.
• Hiding with opacity: 0 and leaving an invisible control that can still be clicked.
• Using float for page columns in new code.
• Using display: none for screen-reader-only text, which hides it from those readers too.

Best practices

• Pick the HTML element by meaning, and adjust its display with CSS.
• Use display: none or the hidden attribute for things that are truly hidden.
• Use flexbox or grid for layout.

Summary

Normal flow stacks blocks and runs inline boxes along lines. display changes how a box behaves. display: none, visibility: hidden and opacity: 0 hide things in different ways. Floats still wrap text around images.

Mark lesson complete