Recently I learned about "visibility" in CSS2. I had been used to hiding elements with "display: none" so this really surprised me. So I looked into it a little bit. The two properties have many similarities such as being used to hide and display elements.

Their differences are two-fold:

1) Space - visibility hides the selected element however it still takes up the same amount of space, display: none will not take up space originally occupied by the element. The conseqence of this is if there are other elements after it on the page, the elements will move upwards if "display" is used but not if "visibility" is used.

2) Child element behaviours - visibility hides the element it is applied to but doesn't hide the child elements if the child's visibility is visible. Display:none will override all child element properties and none of its children will show no matter their "display" property.