You can hide an element in CSS using the CSS properties display: none or visibility: hidden. display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
You may encounter a scenario where you want to hide an element on the web page. For instance, you may have a block of text that you want to remain hidden and appear when a user clicks a button.
Find your bootcamp match
GET MATCHED
By continuing you agree to our Terms of Service and Privacy Policy, and you consent to receive offers and opportunitiesfrom Career Karma by telephone, text message, and email.
X
By continuing you agree to our Terms of Service and Privacy Policy, and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
CSS Hide Element
There are two main approaches for hiding an element in CSS, using:
- The display: none attribute.
- The visibility: hidden attribute.
The first approach may affect the layout of your web page. But, the second method is nonetheless popular.
CSS Hide Element: display
The display property controls how an element is displayed on a web page. Every element in an HTML document has a default value for the display property, although that value depends on the element. For most elements, the default display value is either block or inline.
If you don’t want an element to display on an element at all, you can set the value of the display property to none.
The following style rule hides an element on a web page:
display: none;
When you set the value of display to none, the affected element will disappear. This means the element will no longer take up any space on the web page.
display: none Example
Suppose we are designing an About Us web page for a local cookery club. In our initial design, we added an image of a cake to the page. Now the club wants us to hide the image because they are not sure about the final design.
We could hide the image on the page using the following code:
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: none;}<style>Click the
button in the code editor above to see the output of our HTML/CSS code.
We defined three elements within a HTML <div> tag. The <h1> element is used to create our header, and contains the text About Us. Our HTML <img> element creates an image of a cake, which is 200px tall and 200px wide. The <p> element contains a short description of the club.
In our CSS code, we use the “img” selector to select all image tags on our page. This rule sets the display property of all <img> tags to none. Or, in other words, the style rule hides our image.
Although our image is hidden, it still exists on our web page. If we want to bring our image back, we can either delete the display:none; style. Or, we can specify another display style (like block or inline).
You could define this rule as an inline HTML attribute:
<img style=”display: none;” src=”https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80″ height=”200″ width=”200″ />
To learn more about inline HTML and CSS properties, check out our inline CSS guide.
CSS Hide Element: visibility
The CSS visibility property is used to control whether an element is visible on the web page.
By default, the value of the visibility property is visible. However, if you want to make an image invisible, you can set the value of visibility to hidden.
The following style rule sets the visibility of an element to hidden:
visibility: hidden;
Let’s return to the cooking club example from earlier. Suppose we want to hide the image of the cake on our About Us web page. We could do so using this code:
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: visibility;}<style>Click the button in the code editor above to see the output of our HTML/CSS code.
Our HTML code is the same in this example. In our CSS file, instead of using the display property, we used visibility to hide our element. As you can see above, our image has been hidden from the web page.
While our image is gone, there is now a space between our header and our paragraph where the image would have been placed. This is a feature of the visibility: hidden; style. The space of the original element is still kept by the web page. But, the element is hidden.
CSS Visibility vs. Display
The two methods we have discussed of hiding an element appear to be the same, but there is a difference between the two.
The display: none rule removes an element from an HTML document. While the code for the hidden element is still present, the element itself will not be displayed.
The visibility: hidden rule, on the other hand, hides an element, but the element will still take up space on the web page. If you want to hide an element but keep that element’s space on the web page, using the visibility: hidden; rule is best.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Conclusion
The display: none rule removes an element from a document and hides it from view. The visibility: hidden rule hides an element on a document and leaves the space in which the element would have appeared empty.
Do you want to learn more about CSS? Read our How to Learn CSS guide. This guide is full of actionable advice on how to learn CSS. You’ll also find a list of top resources you can use to advance your knowledge.
