CSS: display: none と visibility: hidden の違いを確認
要素を非表示にしたい場合、「display: none」と「visibility: hidden」という方法があります。
この２つの違いを結論から言うと、「要素の領域（スペース）があるかないか」の違いです。
「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」は要素の領域（スペース）がある。(スペースはあるが非表示となっている)