この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
visibility: hidden; と display: none; の違い
これらの違いは、アナロジーを用いることで簡単に理解することができます。
-
visibility: hidden;は「透明人間」 -
display: none;は「部屋から出て行った人」
visibility: hidden;：透明人間
- レイアウトへの影響
- 透明人間は、姿は見えませんが、その場に立って場所を占有しています。そのため、他の人たちはそのスペースに移動できず、全体のレイアウト（立ち位置）は変わりません。
- 要素の存在
- 要素のはページ上に存在しています。ただ、描画されていないだけです。
- 開発者ツールで検知できます。
display: none;：部屋から出ていった人
- レイアウトへの影響
- 部屋から出て行ったので、その人がいたスペースは完全になくなります。後ろにいた人たちはそのスペースを詰めるので、全体のレイアウトは変わります（再計算されます）。
- 要素の存在
- 要素はページ上から存在そのものが消え去ります。HTMLに最初から書かれていなかったかのように振る舞います。
- 開発者ツールで検知できません。
まとめ
| プロパティ | 見た目 | 場所 | レイアウト | 開発者ツールでの見え方 |
|---|---|---|---|---|
visibility: hidden; |
見えない | 占有する | 影響なし | 要素はDOMツリーに表示され、レイアウト上のスペースも確保されていることがハイライトで確認できる |
display: none; |
見えない | なくなる | 影響あり（詰まる） | 要素はDOMツリーには表示されるが、レイアウト上のスペースは0になり、ハイライトされない |
作成した回答
visibility: hidden; では、見た目は見ることができないが場所そのものは占有されたままである。つまり、レイアウトを崩さずに要素を消すことができる。一方、display: none; では、見た目は見ることができない点では同じであるが、レイアウト上のスペースは0となるためレイアウトに影響がある。