現象

CSSのvisibilityプロパティで hiddenに設定しても、表示内容は消えますが、表示領域はそのまま残り、間が空いてしまうことがあります。

原因

visibilityプロパティでは、表示の切り替えはできますが、表示領域は確保されるため、上述の現象が発生します。

対策

visibilityプロパティではなく、displayプロパティを利用します。CSSの書式は「要素の表示方法を変更する - display プロパティの利用」の記事を参照してください。

参考

visibilityプロパティの利用や記述方法についてはこちらの記事を参照してください。