What are visibility hidden and display none in CSS?

When we hide HTML content to the client, there are two main techniques in CSSCascade Style Sheets that can be used.

1. visibility: hidden - this CSS property makes the text invisible, but the space allocated for it will remain. In other words, the element is hidden from view but not the page flow.

2. display: none - unlike the first property, this means the element will not appear on the page at all. In this case, the tag is removed from the normal flow of the page, which allows other elements to fill it in.

In visibility: hidden, space remains allocated for the text. That is not the case in display: none.

Code

The HTML code

Let’s observe the following example to learn how to use these CSS properties in an HTML page.

The CSS code

Example 1

Now let’s attach the CSS file to HTML and see what happens to the text inside it.

Explanation

As you can see from the result, we have two blocks: right (control) and left (test). They have the same exact elements, which are four <div> elements and one <span> tag element.

On the left all contents are visible, whereas on the right block we use visibility: hidden and display: none for some tags.

Let’s analyze the result now.

visibility: hidden is used for the first div in the test block (right). As a result, the content is hidden but the space for it is still available. This is because visibility: hidden hides the element but still leaves it on the page flow.

Next, we apply display: none to <div 3>. What you see is that the content disappears completely, and its space is used by other elements (i.e., <div 4> in this example).

As we said above, display: none hides an element and removes it from the normal flow of the page.

You can also remark that in <div 4> we used visibility: hidden for the span element.

Example 2

In this example, we’ll see how the properties behave with child nodes. We will use inline CSS styling here.

<div id="parent">
    <p>This is the parent area</p>
    <div id="child">
        <p>I am the child</p>
    </div>
</div>

In the code snippet above, the parent area is hidden, but the child area is visible if we use display: none in the same context as this:

<div id="parent">
    <p>This is the parent area</p>
    <div id="child">
        <p>I am the child</p>
    </div>
</div>

Nothing is shown to the user, though we asked to display the child div (using display: block). This is because display: none, when applied to the parent div, removes everything in the page flow.

Real-life illustration of CSS properties

Still confused with visibility: hidden and display: none? Imagine yourself in a room with two other people. The first person hides behind a curtain while the second person leaves the room.

The first person is not visible but still in the room and occupies its space; that is the visibility: hidden rule.

The second one left the room so he is not visible same as the first one, but he does not occupy any space in the room; that is the display: none rule.