visibilityプロパティは、要素を表示するかしないかを指定するプロパティです。
hiddenの指定をした場合、display: none;のように要素自体を無かったかのようにする訳ではなく、見えなくなるだけなのでレイアウトには影響します。

JSと組み合わせてボタンを押したら表示したり、未完成コンテンツがあったりしてリンクとかを、レイアウトを維持したまま一時的に非表示にしておきたい場合などに使えます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

visible｜hidden｜collapse｜inherit

初期値

visible

適用される要素

全ての要素

継承

します

パーセント値

N/A

メディア

visual

値の解説

visible

表示します。

hidden

表示しませんが、見えないだけでレイアウトには影響します。
尚、子孫要素にvisibleの指定をした場合は、その要素は表示されます。

collapse

テーブルの行や列などのグループに指定した場合は、その範囲を取り除いてテーブルを詰めます。
他の要素に指定した場合、hiddenの指定と同じになります。

visibilityのサンプル

ul {
  margin: 15px 30px 20px;
}

ul li {
  list-style: none;
  margin-bottom: 10px;
  background: #e8e8e8;
}

ul li.hidExample img {
  visibility: hidden;
}

<ul>
<li class="hidExample"><img src="/img/bnr/css-happylife.gif" alt="CSS HappyLife" /></li>
<li><img src="/img/bnr/css-happylife.gif" alt="CSS HappyLife" /></li>
</ul>

li要素のスタイルは当たったまま、img要素だけ見えないようにしています。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• 
•