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.
Top comments (0)