CSS hiding elements using Display property and Visibility property

In this post we will see how we can hide the elements using CSS properties. There are generally two properties we can use to hide the HTML elements.

• Display
• Visibility

These are the two properties available to hide elements using CSS. Many people think these two properties do the pretty much the same thing but, there is slight difference between those two properties. we will discuss them with code below.

html

<p>Lorum ipsum and some dummy text</p>

<div id="element1"></div>

<p>Lorum ipsum and some dummy text</p>

<div id="element2"></div>

<p>Lorum ipsum and some dummy text</p>

css

#element1 {

       width: 200px;

       height: 200px;

      visibility: none;

}

#element2 {

       width: 200px;

       height: 200px;

      display: none;

}

I recommend you to copy and past the above code and check the result and play around with it. Let me first explain you the difference between these two properties.

When you use display property and hide the element, it will pretty much hide the whole elements which means it will totally removes the element from the page and the elements below will get adjusted automatically.

But, when you use visibility property to hide the elements, it will just make the element invisible but the white space for that element will be still there.