基本的なことかもしれませんが、今一度「display:none」と「visibility:hidden」の違いについてメモしておきます。
display:none
コード自体は存在したままで、要素自体は表示されない。
visibility:hidden
コード自体は存在したまま、表示エリアも残り、要素自体は表示されない。
※簡単に言えば、「visibility:hidden」の場合、本来要素が表示されるエリアはそのまま確保し、そのエリアには何も表示されない空白ができるということになります。
▼ 実際に画像で説明を入れておくと、下図のようになります。
● display:none;とvisibility:hidden;を指定しない場合
● display:none;とvisibility:hidden;を指定した場合
visibility:hiddenの場合に限り、空白エリアが残っているのがわかると思います。
このような違いが、ふたつにはあります。