[解決済み] visibility:hiddenとdisplay:noneの違いは何ですか？

質問

CSSのルール 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