要素を非表示にしたときにページ レイアウトを保持する

視覚的なレイアウトに影響を与えずに HTML 要素を非表示にすることを目的とする場合、visibility: hidden を使用すると、次のような問題が発生する可能性があります。望ましくない結果に。要素がビューから非表示になっている間、要素はページ上の同じスペースを占有し続けます。

表示の無効化

この課題を克服するには、表示プロパティを使用することをお勧めします。要素の表示を none に設定すると、要素は DOM から完全に削除されたかのように、視覚的表現から効果的に消えます。

次の例を考えてみましょう:

初期状態では div 要素が通常表示されています。非表示にするには:
#element {
  display: none;
}
display: none が適用されると、要素は視覚的になくなり、以前に占有していたスペースが解放されます。要素の可視性を復元するには:
#element {
  display: block;  
}
表示を使用する利点: なし
ページのレイアウトを保持します
HTML コード内の要素の位置を保持します
表示を設定することで要素を簡単に再表示できるようにします: block