【CSS】要素を消すdisplay:noneと非表示のvisibility:hidden【923日目】

要素を非表示にしたい

この画面のこの要素は、ユーザーが特定の動作をするまで表示をさせたくない。
なので、非表示にしたいと考える。

このときに思いつくのはこの2つ。

.none {
  display: none;
}
.invisible {
  visibility: hidden;
}

この違いはなにか。

例のcodepen

https://codepen.io/klack710/pen/wvKzZVq

消してスペースが残るか残らないか

.box {
  background-color: skyblue;
}

.b {
  display: none;
}

.d {
  visibility: hidden;
}

<div class="box a">aaa</div>
<div class="box b">bbb</div>
<div class="box c">ccc</div>
<div class="box d">ddd</div>
<div class="box e">eee</div>

display:none のbbbは、要素が消えたので、空いたスペースが詰められます。

visibility: hidden のdddは、消えてますが空いたスペースが詰められておらず、空白が残っています。

このように、スペースを詰めるべきか否かでどちらを使うか判断しましょうφ(･･