css difference between display and visibility

1display:none 
2/*means that the tag in question will 
3not appear on the page at all 
4(although you can still interact with it through the dom). 
5There will be no space allocated for it between the other tags.*/
6
7visibility:hidden 
8/*means that unlike display:none, 
9the tag is not visible, but space is allocated for it on the page. The tag is rendered, 
10it just isn't seen on the page.*/

1.div-1{
2  display: none;
3  /* 
4  .div-1 Will not reserve a place on the page
5  the element will not allocate a space in the page and will not be visible
6  */
7}
8.div-2{
9  visibility: visible;
10  /* 
11  .div-2 Will reserve a place on the page
12  the element allocate a space in the page, but its not visible
13  */
14}