An example of the difference between display and visibility

Display can usually be set to none, inline, and block

Visibility can usually be set to hidden and visible

When display is none and visibility is hidden, the element disappears. But there are differences.

Display hides the element and the position is no longer occupied, while visibility takes its place.

You can see from the examples:

 
<div id="myDiv" style="width:100px;border:1px solid #aaa;"> 
<p> 

</p> 
</div> 
<input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value=" Whether or not visible visibility" /> 
<input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value=" Whether or not visible display" /> 
<script> 
function isVisibility(me){ 
if (me.style.visibility=="hidden"){ 
me.style.visibility="visible"; } 
else{ 
me.style.visibility="hidden"; 
} 
} 

function isDisplay(me){ 
if (me.style.display=="none"){ 
me.style.display="block"; } 
else{ 
me.style.display="none"; 
} 
} 
</script>