HTML & CSS
Article

AtoZ CSS Quick Tip: The Versatility of the Display Property

By Guy Routledge

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript on the display property here.

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the display property for you.

cssAZ-D2D-01

D is for display

Not all things are equal when we don’t want to display content.

display: none is not the same as visibility: hidden

  • display: none does not allocate any space on the page; the element is removed from the normal flow and the space it once occupied is removed.
  • visibility: hidden does still take up its original space on the page; the item simply cannot be seen. This is much like setting opacity: 0.

For example, see the below CSS code:

.display-test {
  display: none;
}
.vis-test {
  visibility: hidden;
}

Accompanying the following HTML:

<div>
  <p>Lorem ipsum dolor sit amet ...</p> 
  <p class="display-test">Ut enim ad minim veniam ...</p>
  <p>Lorem ipsum dolor sit amet, consectetur ...</p> 
</div>
<div>
  <p>Lorem ipsum dolor sit amet ...</p> 
  <p class="vis-test">Ut enim ad minim veniam ...</p>
  <p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>

The .display-test text will have a rather different result to the .vis-test text, as you’ll see in the below CodePen:

See the Pen tip-d by SitePoint (@SitePoint) on CodePen.

Notice how there is blank space in the second box where a paragraph has been hidden. There is no allocated space in the first box that uses display: none.

  • Murtazin Rustam

    Very clear and simple explanation of display property.

    • Angela Molina

      Excellent! Guy does so well explaining CSS :)

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.