visibility:hiddenとdisplay:noneの違いは何ですか？

display:none` は、当該タグがページ上に全く表示されないことを意味します（ただし、dom を通してタグを操作することはできます）。 他のタグの間にそのタグのためのスペースが割り当てられることもありません。

visibility:hiddenは、display:none` とは異なり、タグは表示されませんが、ページ上にスペースが割り当てられます。タグはレンダリングされますが、ページ上では表示されないだけです。

例えば、以下のようになります。

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

style-tag-value]をdisplay:none` に置き換えると、次のようになります。

test |   | test

style-tag-value]をvisibility:hidden` に置き換えると、次のようになります。

test |                        | test

display:none`では、レイアウトフローから要素を削除します。

visibility:hidden` は、要素を隠しますが、スペースは残します。

display: none`は、ページから要素を完全に削除し、その要素が全くないかのようにページを構築するものである。

Visibility: hidden` は、もはや見ることができないにもかかわらず、ドキュメントフローの中にスペースを残します。

これは、あなたが何をしているかによって、大きな違いがあるかもしれないし、ないかもしれない。