visibility: hidden hides the element, but it occupies space and affects the layout of the document.
<!DOCTYPE html>
<html>
<head>
<style>
h1.vis {
visibility: visible;
}
h1.hid {
visibility: hidden;
}
</style>
</head>
<body>
<h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1>
<p>Note - Second heading is hidden, but it still occupy space.</p>
</body>
</html>
display: none also hides the element but not occupy space. It will not affect the layout of the document.
<!DOCTYPE html>
<html>
<head>
<style>
h1.vis {
display: block;
}
h1.hid {
display: none;
}
</style>
</head>
<body>
<h1 class="vis">It is visible</h1>
<h1 class="hid">It is hidden</h1>
<p>Note - Second heading is hidden and not occupy space.</p>
</body>
</html>