DEV Community 👩‍💻👨‍💻

Shshank
Shshank

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
div {
height: 100px;
width: 100px;
background-color: black;
Enter fullscreen mode Exit fullscreen mode

BhavShashank

Applying visibility: hidden to div element

Visiblity Hidden BhavShashank

Applying display:none to div element

Display None BhavShashank

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.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.