Normal flow and display

In plain English

Every element on a page sits in a stream called document flow, a bit like words in a sentence. Block elements such as paragraphs and divs stack vertically and stretch the full width, while inline elements such as links and spans sit side by side and only take the space they need. The display property tells the browser which of these behaviours to use, and display: none removes an element from the flow entirely. Understanding flow is the key to knowing why a layout breaks before you reach for a hack.

Step by step

1. 1Open a small page that has a paragraph, a link and a span.
2. 2Look in the browser and note which elements stack and which sit inline.
3. 3Give the span display: inline-block and add a width to see it take shape.
4. 4Set display: none on one element and confirm it leaves no space behind.

p {
  display: block;
}

a {
  display: inline;
}

.badge {
  display: inline-block;
  width: 6rem;
}

.hidden {
  display: none;
}

Common mistakes

• Beginners often give width and height to an inline element and are surprised when nothing changes.
• A common error is expecting two divs to sit side by side just because there is room for them.
• Some people use display: none to hide an element and then forget it is gone from the layout, not just invisible.
• Mixing up inline-block and inline is easy when an element will not accept padding the way you expect.