visibility: hidden;とdisplay: none;の違い。

css
  • visibility: hidden;...見た目は消えるが要素の描画領域は残る。空白スペースが残っているような物。
  • display: none;........見た目は消えるし、描画領域も無くなる。



html

<ol>
  <li id="v-h">visibility: hidden</li>
  <li id="d-n">display: none;</li>
  <li>テスト</li>
</ol>

CSSなしの出力

  1. visibility: hidden
  2. display: none;
  3. テスト
これに、以下のＣＳＳを添付すると...

ol{background: #B3A416;}
li{background: #E3E3E3;}
li#v-h{visibility: hidden;}
li#d-n{display: none;}

CSS付与の出力結果

  1. テスト

visibility: hiddenがかかった1番目のli要素は文字や画像の出力が無くなったが、形跡だけが残っている状態。
display: noneがかかった2番目のli要素は文字・画像の出力は元より、形跡自体も無くなり、3番目のli要素が
繰り上げされている。