display屬性設定一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。 隱藏元素 - display:none或visibility:hidden 隱藏一個元素可以通過把display屬性設定為"none"，或把visibility屬性設定為"hidden"。但是請注意，這兩種方法會產生不同的結果。

visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

visibility:hidden

在html中

<h1>這是一個可見標題</h1>
<h1 class="hidden">這是一個隱藏標題</h1>
<p>注意, 例項中的隱藏標題仍然佔用空間。</p>
 

在CSS中

h1.hidden {visibility:hidden;}

display:none

在html中

<h1>這是一個可見標題</h1>
<h1 class="hidden">這是一個隱藏標題</h1>
<p>注意, 例項中的隱藏標題不佔用空間。</p>

在CSS中

h1.hidden {display:none;}

display:none和visibility:hidden的區別。 1.visibility:hidden隱藏元素後，元素仍然佔用原來的位置。 2. display:none隱藏元素後，元素不會佔用原來的位置。

display-inline

<p>連結列表水平顯示：</p>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
 

li{
	display:inline;
}

將display設定為inline，將使其行為和元素inline一樣—即使它是普通的塊元素如

display:block;

<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

span
{
	display:block;
}

display-block的作用是將行級元素自動換行。