CSS: display: none と visibility: hidden の違い
CSSを使ってHTML要素を非表示にしたい場合、 「display: none」と「visibility: hidden」 という方法があります。
一見似ているようなプロパティですが、この２つの違いを結論から言うと、 「HTML要素の領域（スペース）があるかないか」の違いです。
「display: none」は要素の領域（スペース）がない。
「visibility: hidden」は要素の領域（スペース）がある。
(スペースはあるが非表示となっている)
具体的なサンプルを見ると違いがすぐわかりますので、さっそく見てみましょう。
display: none と visibility: hidden サンプル
まず、次のような３行のリストがあるとします。
- 1行目
- 2行目
- 3行目
2行目に「display: none」を指定する
リストの2行目だけに「display: none」を指定すると、次のようになります。
- 1行目
- 2行目
- 3行目
2行目が無いものとして、領域（スペース）が詰められているのがわかると思います。 このように、「display: none」は領域（スペース）が無くなります。
2行目に「visibility: hidden」を指定する
次は、リストの2行目だけに「visibility: hidden」を指定すると、次のようになります。
- 1行目
- 2行目
- 3行目
「visibility: hidden」を指定した場合は、 2行目の領域（スペース）は確保されているけれど、非表示になっているのがわかります。
まとめ
上のサンプルで見たとおり、どちらも非表示になるのですが、 「要素の領域（スペース）があるかないか」の違いがあります。
「display: none」は要素の領域（スペース）がない。
「visibility: hidden」は要素の領域（スペース）がある。
(スペースはあるが非表示となっている)