display and the normal flow

The normal flow

At last you start placing things exactly where you want them. But before you position anything, it helps to know what the browser does on its own: it places each box following the normal flow, from top to bottom and, within a line, from left to right. The display property decides how each element participates in that flow. Nail this, and breaking the flow on purpose (coming up soon) stops being a mystery.

display: block

A block element takes up the full available width and starts on a new line, like a paragraph claiming its own row. It respects width, height, and the four sides of margin and padding. These are <div>, <p>, <h1>, <section>...

.block {
  display: block;
  width: 200px;
  height: 60px;
}

display: inline

An inline element flows within the text, one after another and with no line breaks, like the words in a sentence. It ignores width and height and only applies horizontal margin/padding reliably. These are <span>, <a>, <strong>...

.inline {
  display: inline;
  /* width and height have NO effect here */
}

display: inline-block

The middle ground, the best of both worlds: the element flows inline (no line break) but does respect width, height and all margins/paddings. Perfect for buttons or tags that need their own size without giving up their spot in the same row.

.tag {
  display: inline-block;
  width: 80px;
  padding: 6px 10px;
}

display: none

display: none removes the element from the flow: it is not painted and takes up no space, as if it had never been there. Careful, because it is different from visibility: hidden, which hides it but reserves its slot (leaves the gap empty).

Rule of thumb: block stacks, inline flows in the text, inline-block flows but with size, and none vanishes without a trace.

Examples

Three inline tags, but with their own size

<style>
.tag {
  display: inline-block;
  width: 70px;
  padding: 6px;
  background: #ddd6fe;
  text-align: center;
}
</style>
<span class="tag">One</span>
<span class="tag">Two</span>
<span class="tag">Three</span>