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