Visibility Property in CSS

Learn visibility property in CSS with examples. If we don’t want to display an HTML element, we need to set the “display” property to “none” in CSS. When doing this the browser will not display the space for the HTML element.

Sometimes there is a situation when we need to make the space visible, then we need to set the “visibility” property of the HTML element as “hidden” The default value of the visibility property is “visible”. So the display property decides how an element box should look. And the visibility property decides whether the content of an element should be visible or hidden. . Let’s see some examples of both uses.

Example Code

HTML:

<ul> <li>HTML</li>
<li class="visibility">CSS</li>
<li class="display">JavaScript</li>
<li>Bootstrap</li>
</ul>

CSS:

ul{
background-color: red;
padding: 10px;
text-decoration: none; }
li{
background-color: blue; }
.visibility{
visibility: hidden; }
.display{
display: none; }

Output:

Here the space is visibility hidden is display