visibility:hiddenとdisplay:noneの違い

htmlタグを非表示にする際に、当たり前のようにつかっていたvisibility:hiddenか、display:noneですが違いがありましたのでまとめておきます。

visibility:hidden

指定した個所は非表示になりますが、ボックスの領域は存在したままです。
要素が見えなくなっただけなのでスペースは存在は残ったままになります。

指定した個所は非表示になり、ボックスの領域もなくなります。
ボックスがあった領域は詰めて表示されるようになります。