Overview of This Lesson

The display and visibility properties can be very useful for responsive design and to add a bit of functionality to a web site. You can use both to show and hide elements, and you can use the display property to change how elements and/or their contents behave in different layout scenarios.


Before doing this tutorial, it is recommended that you first read about responsive design. It's also helpful if you understand the basics of media queries.

The Display Property

The display property is used to change the layout behaviour of an item, and also to show/hide an element. It can also be used to define how the layout of the element's children will behave. We'll talk about showing and hiding elements in the last section of this lesson. For layout, the display property can define whether or not an element behaves as a block element or an inline element, or whether or not it's a FlexBox container or Grid container.

The possible values for the display property are:

One very common use of the display property is to change an element's behaviour as a block or inline element. For example, in a responsive page or app, you might want links in a navigation bar to appear stacked vertically when the screen is small, and to appear in a horizontal row when the screen is wider. This can be done by changing the display property in a media query:

See the Pen Untitled by Wendi Jollymore (@ProfWendi) on CodePen.

In this example, the links are styled as block elements by default, and when the screen reaches a size of 758px in width or higher, they change to inline elements.

The inline-block Value

So what the heck is the inline-block value for? Sometimes you want to display block elements as inline elements, but you still need to treat them as block elements. For example, inline elements can't be assigned width or height in CSS, and they don't have top or bottom margins or padding. Using inline-block defines an element to display inline, but you can still set its height, width, and top or bottom margin/padding.

Examine the following CodePen below: There are three <div> elements inside a <section> and all three divs are set with display: block;. This does nothing spectacular: DIV elements are already block elements, so using display: block on them is redundant. However, change the declaration to display: inline; and watch what happens.

See the Pen CSS Display: inline-block by Wendi Jollymore (@ProfWendi) on CodePen.

Notice that even though I defined each <div> with a height and width of 200px, none of the divs are 200px in width or height anymore: for inline elements, the width is always the width the element needs to fit its contents, and the height is the standard line height. That's why you see the <div> elements overlapping each other vertically (without the purple borders, they would just look like a paragraph of text).

Notice also that the top and bottom padding are now being ignored, although you can still see that the left/right padding is being respected. The same is true with the top/bottom margin: it is no longer being used, but the right/left margin is still there. You can tell because the text content is flowing naturally with the natural line height, and there is normal space between the lines of text. But you can still see the left/right gaps between the left/right borders (margin) and the inner edges of the borders and the text content (padding).

Now change the declaration to display: inline-block;. You'll notice that the height and width of the <div> elements returns, as does all the margin and padding, but the elements are displayed side-by-side as inline elements would be displayed.

The inline-block element is useful when you want to display block elements inline but you need to keep height/width and/or margins/padding on top and/or bottom.

Here's a similar example with nested DIV elements:

See the Pen CSS Display: Inline/Block by Wendi Jollymore (@ProfWendi) on CodePen.

Notice that when you change display: block to display: inline for for the nested div element, it flows with the rest of the text content inside the outer <div>. It also loses it's top/bottom margin and padding.

Now change inline to inline-block and you can see how the top/bottom margins and padding comes back.

The display property has a few other values for more advanced formatting that you can check out in the MDN: display property documentation.

Showing/Hiding Elements

Showing and hiding elements is a useful thing to be able to do: If you've seen web pages with a bunch of clickable tabs that show different pages of content, you've seen this working! Showing and hiding elements can be done with the display: none declaration and also with the visibility property.

The visibility Property

The visibility property changes the visibility of an element (duh). It can take one of 3 values:

In the CodePen below there are three <div> elements, but on the second/middle div, I've set visibility: hidden;. You can see that the div does not appear, but you can see the big gap between the first and third <div> elements: that's where the second/middle <div> is sitting. Even though it's not visible, it is still taking up space: it is still part of the document flow.

See the Pen CSS Visibility by Wendi Jollymore (@ProfWendi) on CodePen.

Go into the CSS tab and comment out display: hidden; and uncomment the line with display: none;

After making this change, you'll see that the space with the middle div collapses, leaving the first and third div elements side-by-side.

So if you want to hide an element completely, you can use display: none, and if you want to hide an element but not allow other elements to take up the space, you can use visibility: hidden.


Copy the Display/Visibility Exercise Codepen or copy the HTML and CSS into your own project. The instructions are in the CSS tab.

You can check your solution to the display/visibility exercise when you're done.