what is the difference between visibility: hidden and display:none?
ReportQuestion
2 years ago 906 views
The difference between visibility:hidden and display:none properties is that in the case of the former, the elements are hidden but not deleted. No space is consumed. In case of the latter, the element is hidden and the layout is affected, that is, some space is taken up.
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
display: none;
}
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading does not take up space even after hiding it since we have used display: none;.</p>
</body>
</html>
visibility:hidden
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
visibility:hidden;
}
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading takes up space even after hiding it.</p>
</body>
</html>
Thread Reply