Table of Contents
CSS properties visibility and display are very similar and can confuse some web designers and developers. I too, had a problem to distinguish them in time of beginning my journey in web design. For this reason, to help you smash or even avoid this problem, we will examine both of these properties in-depth along with some examples to understand them better and to know when to use which one. Let’s dive in …
In this post, we will work with simple HTML structure – three <div> elements with same width and height and different colors. These divs will have class “one”, “two” and “three”. The result will look like this:
HTML:
<div class="one"></div> <div class="two"></div> <div class="three"></div>
Regarding CSS, all divs will have “float” property set to “left” and “width” and “height” set to 50 pixels. To differentiate between them, we will use three colors – tomato, purple and light blue. All of these colors are web safe and you can use them just by writing their names instead of hex values. Just to mention, feel free to use whatever sizes and colors you want. The final CSS setting will be following:
CSS:
div {
float: left;
width: 50px;
height: 50px;
}
.one {background: tomato;}
.two {background: purple;}
.three {background: lightblue;}
After creating and setting our workplace, we can finally start our examination of “visibility” and “display” properties.
Visibility
First property in line we will dissect is visibility. According to the definition provided by W3School, visibility property specifies whether or not an element is visible. This definition would be almost useless without “tip” mentioned below – invisible elements take up space on the page. This is the most important part and, I think, should be part of the whole definition. What it says is basically that even when you hide the element, using “visibility” property, the space taken by it will not be available for other elements. So, to imagine it better, we can use our divs and try visibility on real-life example.
The best way to show how this property works will probably be to hide the first or second <div> element. Let’s pick the second one and set its “visibility” property to “hidden”.
CSS:
.two {
background: purple;
visibility: hidden;
}
The result will look like this. First div – the tomato one – will be first element on left. The last element on right will be third div – the blue one. However, they will not be placed next to each other. There will be gap between them. This gap is space used by our second div. Even if this div is not visible, it still takes space. This is the one and only difference, if you don’t count the syntax, between “visibility” and “display” property.
This behavior can be used in web design to our benefit. For example, imagine you have couple of images about various topics and you want the user to see some information below when he hover over them. We can put this information into paragraph and place it right under the image.
HTML:
<div class="container"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Triceratops_AMNH_01.jpg/1024px-Triceratops_AMNH_01.jpg" alt="Triceratops horridus skeleton, American Museum of Natural History" /> <p>Triceratops horridus skeleton, American Museum of Natural History.</p> </div> <div class="container"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Herrerasaurusskeleton.jpg/1280px-Herrerasaurusskeleton.jpg" alt="The early forms Herrerasaurus (large), Eoraptor (small) and a Plateosaurus skull" /> <p>The early forms Herrerasaurus (large), Eoraptor (small) and a Plateosaurus skull.</p> </div> <div class="container"> <img src="http://upload.wikimedia.org/wikipedia/commons/6/62/Stegosaurus_at_the_Field_Museum.jpg" alt="Stegosaurus stenops skeleton, Field Museum" /> <p>Stegosaurus stenops skeleton, Field Museum.</p> </div>
Using “display” property and switching between “none” and “block”, or whatever, values would cause “jumping” of the content placed below containers. If we use visibility instead, space occupied by information boxes will remain used while the information will be hidden. When user hover over the images, information will be shown without any “jumping” or moving of the content around.
CSS:
.container {
float: left;
margin: .5em;
width: 300px;
height: 300px;
}
img {
width: 100%;
height: 200px;
}
p {visibility: hidden;}
img:hover + p {visibility: visible;}
With this setting, we will get three containers with images and when user hover over them, the content of paragraphs will be shown.
Codepen link:
https://codepen.io/d3v3r0/pen/nDphb
Display
Unlike “visibility”, “display” property will hide the element and its content and also free-up the space that would be used by that element otherwise. So, to use our example with three div elements, what will happen when we use this property on the second one?
CSS:
.two {
display: none;
background: purple;
}
The result will be two divs, tomato and blue one, placed next to each other without any white space between then. It is similar to situation when would second div – purple – didn’t exist at all. However, in case of previous example with images and info paragraphs, this property could cause us troubles. What am I referring to is possible “content moving” issues when we have some additional content below those image containers. These issues are caused by the fact that “display” property has impact on space used by element. So, if we use “display” with value of “none” on paragraphs and let them display on hover, there will be no space reserved for them. The consequence is moving content below paragraphs and taking that space. This behavior can create more serious troubles leading even to breaking whole layout.
However, display property has one great benefit. When it comes to assets like images, if we set the “display” property to “none”, first, image will not be shown and second, it will not be downloaded by browser. This makes “display” property great for managing images across various resolutions and viewports (mobile, tablet, desktop) because it means lower bandwidth and more mobile-friendly website. Simple example can be creating image container with hi-res photo for bigger screens (desktop, retina, etc.) while hiding it on small screens by setting its “display” property to “none”. Thanks to this, browser will not download that image on mobile devices with small screens.
Summary
When you want just to hide some element on the page while keeping the space and layout the same – hiding the content and left the space occupied by element reserved for it – use the “visibility” property. On the other hand, when you want to hide element completely and also “free-up” the space occupied by that element, use “display” property. Another situation when it is better to use “display” is to lower bandwidth because assets with this property set to “none” will not be downloaded by browser. I hope that this post brought some clarity into display vs visibility question.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
