設定元素的矩形格子可見，或隱藏。可設為：
- visible：顯現矩格，此為預設值。
- hidden：隱藏矩格，但依然佔有版面空間。要完全消去任一元素所佔的空間，要用 display:none。
- collapse：隱藏矩格，但依然佔有版面空間。只有用在報表（TABLE）時，會縮減空間。IE6 不能用 collapse。
- inherit：繼承父元素的特徵值。
- 風格用法：
<div style='border:solid 1px red; width:300px'>
圖一<br />
<img style='visibility:hidden' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
</div>
<div style='border:solid 1px red; width:300px'>
圖二<br />
<img style='visibility:collapse' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
</div>
<div style='border:solid 1px red; width:300px'>
圖三<br />
<table style='visibility:collapse'>
<tr><td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
</table>
</div>
<div style='visibility:hidden; border:solid 1px red; width:300px'>
圖四<br />
<img style='visibility:visible' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
</div> - 執行結果：圖一
圖二
圖三
- 上面的圖一與圖二設為 hidden, collapse，所以看不見，但佔有空間。圖三則外加 TABLE 元素，且此 TABLE 元素設了 visibility:collapse，因此看不見也不佔空間。Firefox 符合前述規則。在 IE6 圖二與圖三都會顯現。在 Safari, Chrome 中，圖三看不見但是佔有空間。第四圖外層的 DIV 元素設了 visibility:hidden，而 IMG 元素則設了 visible，結果 DIV 的內容消失，但是圖形有展現出來。
javascript 應用。可以用 style 物件 的特徵 visibility 作動態變化。
- 風格用法：
<img id='test'src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
<script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'","'+ms+'")', ms);
}
toggleCSS("test", "visibility", "hidden", "visible", 1000);
</script> - 執行結果：
