visibility:hiddenとdisplay:noneのスタイルの違い
タグを非表示にしたいとき、スタイルでvisibility:hiddenか、display:noneを指定すると思います。
どちらもスタイルを指定したタグが非表示になることは同じですが、非表示になったタグのレイアウトに違いがあります。
- visibility:hidden → レイアウトに変化なし
- display:none → レイアウトが変化する
■visibility:hiddenを指定するとタグに囲われた部分は非表示になるがレイアウトは変わらない。
"visibility:hidden"の<span style="visibility:hidden">テスト</span>です。
"visibility:hidden"のです。
■display:noneを指定するとタグに囲われた非表示の部分のスペースが詰められて、レイアウトが変わる。
"display:none"の<span style="display:none">テスト</span>です。
"display:none"のです。
