Display:none doesn't display the elements on the page and doesn't occupy any space.
For example :
<!DOCTYPE html>
<html>
<head>
<style> </style>
</head>
<body>
<h3>Example of display :none </h3>
<div class= "nonedisplay" style="border: 3px solid">
<img src="new-autum.jpg" style="display: none;height: 222px; width: 100%;">
</div>
<h2> In display none, element(img) hides and doesn't occupy any space.</h2>
</body>
</html>
In Visibility : hidden element is invisible but takes the space.
Example :
<!DOCTYPE html>
<html>
<head>
<style> </style>
</head>
<body>
<h3>Example of visibility:hidden </h3>
<div class= "hidedisplay" style="border: 3px solid">
<img src="new-autum.jpg" style="visibility:hidden;height: 222px; width: 100%;">
</div>
<h2>Visibility hidden only hide the content. Here, <img> will occupy the space, but it will be invisible to the user .</h2>
</body>
</html>
0 Comment(s)