How to hide the div element in HTML

In this tutorial, we are going to learn about how to hide the div element in html with the help of an example.

Consider, we have a following html element:

<div class="box"> This is main heading</div>

Now, we need to hide the above div element from the webpage.

Using display:none

To hide a div element in html, we can use the css display: none property.

Here is an example :

<div style="display:none"> This is main heading</div>

When set a display: none to the html element it removes the element completely from the webpage.

We can also add the styles separately to the div element using class attribute instead of inline styles:

<div class="box"> This is main heading</div>

.box {
   display:none;
}

Similarly, we can use the visibility: hidden property to hide a div.

<div class="box"> This is main heading</div>

.box {
   visibility: hidden;
}

Note: If we use visibility: hidden to hide a div, it hides the div but creates an empty space in the webpage.