What is the difference between display:none to visibility:hidden in CSS? Well, there is a big difference between those two CSS properties. The first one which is the display:none will not preserve or occupy any space on the web page. While the visibility:hidden will preserve and occupy the space on a page.

Let's create the following two CSS class for each CSS property and we are going to apply it to UL LI list elements, so you can actually see the differences between both properties in a real example.

<style>
	.vis-none{
		visibility:hidden;
	}
	
	.dis-none{
		display:none;
	}
</style>

Here is the html codes for our example list 1 and list 2.

<h5>Example of using .vis-none css class which will apply visibility:hidden to the li element.</h5>
<ul>
	<li>This is a first line.</li>
	<li class="vis-none">This is a second line.</li>
	<li>This is a third line.</li>
</ul>


<h5>Example of using .dis-none css class which will apply display:none to the li element.</h5>

<ul>
	<li>This is a first line.</li>
	<li class="dis-none">This is a second line.</li>
	<li>This is a third line.</li>
</ul>

Example of using .vis-none css class which will apply visibility:hidden to the li element.

• This is a first line.
• This is a second line.
• This is a third line.

Example of using .dis-none css class which will apply display:none to the li element.

• This is a first line.
• This is a second line.
• This is a third line.

If you see on above example, you can see the first UL LI List, the second line list still preserve the space of the hidden element. While the second example does not. If you have any question regarding with this tutorial, feel free to post your question below if you need help regarding with this tutorial.