解 説

ある要素の表示と非表示の方法をまとめました。

visibilityプロパティ

ボックスの表示(visible)と非表示(hidden)を指定するにはvisibilityプロパティを使用します。

visibilityプロパティで非表示にした場合には、ボックス自体が無くなってしまうわけではありません。ボックスが消えた状態になりますが見えなくなっただけで、ボックスは存在したままです。

サンプル1visibilityプロパティがvisibleの場合

サンプル2真ん中のボックスがhiddenの場合

displayプロパティ

displayプロパティでnoneとした場合は、ボックス自体が消滅します。そのためレイアウトが消えたボックスがないものとして扱われます。
表示する場合はdisplayプロパティにblockを指定します。

サンプル3真ん中のボックスがdisplay:noneの場合

サンプル4 全てのボックスがdisplay:blockの場合