Understanding CSS Display: None, Block, Inline and Inline-Block

An explanation of the differences between display: none and visibility: hidden, understanding display: block, inline and inline-block

The display property is one of the most commonly used features of CSS development. Our web page treats every HTML element as a box, and with the display property, we determine how these boxes will be shown, or whether to show or hide them.

The display property specifies the display behavior (the type of rendering box) of an element. — W3

Display: None vs. Visibility: Hidden

We can hide elements by declaring a display: none value. Another way is to declare visibility: hidden instead of display: none, but there is a difference between them.

To show the difference, let’s hide one of the boxes below:

First I'm hiding the blue box (#box-2) with display: none

#box-2 {
display: none;
width: 100px;
height: 100px;
background: blue;
}

Our blue box is now removed from the view. It actually still exists on the HTML structure, but with display: none an element behaves like it is completely deleted. As a result, the green box takes the empty place and moves to the left automatically.

However, visibility: hidden doesn’t remove an element completely. It just makes the element invisible:

#box-2 {
width: 100px;
height: 100px;
background: blue;
visibility: hidden;
}

Block vs. Inline

Block-level elements

Have you ever noticed that some HTML tags like <div>, <p>, <ul> take full-width of space and each starts with a new line, whereas other HTML tags like <span>, <img> or <a> don’t need a new line and can be placed side by side?

This is because of the different display behaviors: Block or inline. Let’s see the difference with a short example. Without any CSS, I create an HTML template with <p> and <span> tags:

<body>
<p>I'm a paragraph</p>
<p>I'm a paragraph too</p>
<span>I'm a word</span>
<span>I'm a word too.</span>
</body>

Can you see the difference? Each <p> tag starts with a new line even if there is enough space. Span’s, however, displayed side by side.

Every HTML element has a default display value. — W3

Display: Inline-block