visibility : hidden vs display : none

visibility : hidden

When applied to HTML element, it will not be visible in the page. But, the HTML element is still in the DOM. The element will not be seen but it does takes up space.

display : none

When applied to HTML element, it will not be visible in the page. The element has no affect on the DOM. The element will not be seen as well as does not takes up space.

A simple HTML layout



<body>
<h1>CSS Properties</h1>
<div></div>
</body>



div {
height: 100px;
width: 100px;
background-color: black;

Applying visibility: hidden to div element

Applying display:none to div element

To Conclude
With visibility:hidden, the element takes up space but display: none, it is removed from the DOM and does not takes up space.

Thank you for reading.

Shshank @shshank