what is the difference between “visibility:hidden” and “display:none”?
what is the difference between “visibility:hidden” and “display:none”?
They are both style properties
- visibility:hidden: This property hides the element, but it still takes up space in the layout
- display:none : It eliminates the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
In, visibility:hidden : The element will be hidden but it will take the space of the element.
display:none: It will delete the element and wont display it.
Following is a program to understand better:
<html>
<style>
p.a {display: none;}
h2.b{visibility:hidden;}
</style>
<body>
Visibility:hidden :-<h2 class="b">This heading is hidden</h2>
<div>
<p class="a">HELLO WORLD!</p>
</div>
<h2 class="b">This heading is hidden</h2>
<h3>So here the Hidden element is been hidden and the display element is not been displayed<h3>
<body>
</html>
dnn software development companies: http://www.ifourtechnolab.com/dnn-software-development
Last edited by Drasti_Chavda; 03-25-2019 at 07:08 AM.
|
Bookmarks