The display property

Some elements stack one under another, others flow in a line like words in a sentence. This is controlled by the display property — the element's display type. It decides how the element is placed and which sizes apply to it.

Block and inline elements

Block elements — <div>, <p>, <h1>, <ul> — start on a new line and take the full width. Inline elements — <span>, <a>, <strong> — sit inside text and take exactly as much space as their content:

<style>
  div { background: lightblue; }
  span { background: gold; }
</style>
 
<div>A block</div>
<div>Another block</div>
<span>Inline</span> <span>and another one</span>

The background shows the sizes: the blocks stretched to the full width, the inline elements only cover their text.

display: block and inline

The display type can be changed. display: block turns links into blocks — handy for a vertical menu where the whole row is clickable:

<style>
  .menu a {
    display: block;
    padding: 6px;
    background: whitesmoke;
    margin-bottom: 4px;
  }
</style>
 
<nav class="menu">
  <a href="#">Home</a>
  <a href="#">Contacts</a>
</nav>

display: inline does the opposite: blocks line up in a row.

display: inline-block

inline-block is in between: the element sits in the line like a word but accepts width, height and vertical spacing like a block:

<style>
  .tag {
    display: inline-block;
    width: 90px;
    padding: 6px;
    background: plum;
    text-align: center;
  }
</style>
 
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JS</span>

This is how tags, badges and simple buttons are made.

Hiding an element

display: none removes an element completely: it is not visible and leaves no space behind. visibility: hidden hides the element but keeps its space:

<style>
  .none { display: none; }
  .hidden { visibility: hidden; }
</style>
 
<p>The first paragraph</p>
<p class="none">This paragraph is gone</p>
<p class="hidden">This one is invisible but takes up space</p>
<p>The last paragraph</p>

Between the first and the last paragraph there is an empty gap left by the invisible element.

Values of display

The most powerful values are flex and grid: page layouts are built with them, and the layout chapter is devoted to them.

Common mistake

width, height and vertical margin do not work on an inline element. If a size is not applied, check the display type:

<style>
  .box { width: 150px; height: 40px; background: lightgreen; }
  .fixed { display: inline-block; }
</style>
 
<span class="box">The size was not applied</span>
<br><br>
<span class="box fixed">Now it is 150 by 40</span>

Add display: inline-block or block, and the sizes start working.