0
1
chirag
answered Sep 24 '21 00:00
both display:none and visibility: hidden are used to hide an element from view in HTML
but display:none hide the element completely, there is no space in place of the element
but visibility: hidden hide the element but, there is placeholder space in place of the element.
<div style="border:1px solid;width:300px;height:auto">
<div style="width:300px;height:20px">
Display First
</div>
<div style="display:none;width:300px;height:20px">
Display none
</div>
<div style="width:300px;height:20px">
Display second
</div>
<div style="visibility: hidden;width:300px;height:20px">
Visibility hidden
</div>
<div style="width:300px;height:20px">
Display third
</div>
</div>
in the above code, the div element use display:none so it remove the element and there is no space in place of the element for that div, other div use visibility: hidden so it hides the element but there is white space ( width of 300px and height of 20 px ), You can see white space where visibility hidden used but inner content is hidden