Visibility & Display

So far, all the elements we have worked with has been visible, which is probably what you want most of the time. However, CSS does contain a couple of visibility related properties, which can come in handy in a lot of situations. For instance, you want to hide a part of the text until a user clicks a "Show more" button or similar use cases.

Visibility vs. Display

CSS has two properties used to control visibility: The visibility property and the display property. They are used in different situations and act differently in several ways. In this chapter, we'll look into both of them and see just how they differ.

The visibility property

The initial value of the visibility property is visible, simply meaning that the element is visible unless you change it - that makes sense. Now try out this example:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
}
</style>

<div class="box">Box 1</div>
<div class="box" style="visibility: hidden;">Box 2</div>
<div class="box">Box 3</div>

Three boxes but the middle one has been made invisible by setting the visibility property to hidden. If you try the example, you will notice one very important thing: While the second box is not there, it does leave a pretty big hole in the page. Or in other words: The element can't be seen, but the browser still reserves the space for it!

This is one of the most important differences between the visibility property and the display property - elements hidden with the visibility property still affects layout as if it was visible, sort of like a completely transparent element, while elements hidden by the display property doesn't (the browser will treat it as if it wasn't there).

The display property

Let's try the first example of this article, but instead of the visibility property, we'll use the display property, so that you may see the difference:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
}
</style>

<div class="box">Box 1</div>
<div class="box" style="display: none;">Box 2</div>
<div class="box">Box 3</div>

If you try the examples, you'll immediately notice the difference: The second box has vanished without a trace, when we used the none value for the display property.

In the start of this section about the CSS Box Model, we talked about the difference between inline and block elements, how all HTML elements are born as one of them and how this can actually be changed by CSS. The property for doing so is in fact the display property, and while it is used a lot for hiding elements, it is also used for a range of other things - for instance to shift an element between the inline and block type.

In fact, if you have hidden an element by setting display to none, the way to get it back will often be to set display to either inline or block (but there are many other possible values, as you can see from this great reference page for the display property).

Remember how we talked about that the div element is born as a block level element and the span element is born as an inline element? Look how easily this can be changed with the display property:

<style type="text/css">
.with-background {
	background-color: CornflowerBlue;
}
</style>

<span style="display: block;" class="with-background">Hello, world!</span>
<div style="display: inline;" class="with-background">Hello, world!</div>

Summary

Hiding elements on a webpage is easy with CSS - just use the visibility property if you still want to keep the space that the element would usually occupy reserved, or the display property if you want the browser to treat the element as if it wasn't there. In this chapter we also learned that the display property is used for more than just hiding elements, for instance to shift an element between inline and block level or one of the other types.