Making Elements Disappear with CSS

💡 The Concept

In the previous lesson on The Display Property, you worked with display: block, display: inline, and display: inline-block. This lesson covers one more value: display: none, which removes an element from the layout completely. It takes up no space and is invisible to the user, as if it were not in the HTML at all.

.hidden {
   display: none;
}

Why Would You Hide an Element?

It might seem odd to add something to your HTML and then hide it, but there are practical reasons to do this:

• Responsive design. You might want certain elements to show on desktop but hide on mobile, or vice versa. You can use a media query to apply display: none at certain screen sizes.
• Working in a CMS. When using WordPress or another content management system, you may not have access to edit the HTML directly, but you can still add CSS. If a section of the page is generated by the CMS and you do not want it to show, display: none makes it disappear.
• JavaScript show/hide. Many interactive effects work by toggling display: none on and off with JavaScript, such as dropdown menus, modals, and accordion panels.

display: none vs. visibility: hidden

These two properties both hide an element, but they behave differently:

• display: none removes the element from the layout completely. No space is reserved for it.
• visibility: hidden hides the element visually but keeps its space in the layout. A blank gap remains where the element would have been.

/* Removes the element and its space */
.gone {
   display: none;
}

/* Hides the element but keeps the space */
.invisible {
   visibility: hidden;
}

🎬 Video Demonstration

This video covers the display property including how to use display: none to hide elements.

Exercise: Try It Yourself

Step 1. Open your JSFiddle from the previous lesson if you still have it. If not, open a new JSFiddle and add this starting code:

<h1>Slow Like a Sloth</h1>
<img src="https://webdevstudents.com/wp-content/uploads/2025/09/sloth.png" width="200" height="200" alt="sloth in a tree">

Step 2. In your CSS, add display: none to the img and run it. The image disappears completely and the heading is all that remains.

Step 3. Change it to visibility: hidden instead and run it again. The image is invisible but the space it occupied is still there — notice the gap next to the heading.

❓ Frequently Asked Questions

★ Key Takeaways

Sometimes you want an element to take up space but be invisible. Other times you want it completely removed from the layout. This lesson covered display: none and visibility: hidden and explained when to use each one. Next, you will dig into the CSS box model and padding, which is the foundation for understanding how every element takes up space.

← Back to Page Layout Lessons

← Back to All Lessons