[CSS]display:none、block、inline的關係

一、display : none

把 HTML 元件的 display 設為 none 就是不顯示這個東西。 display : none 和 visibility : hidden 的差別是 display : none 這個東西就不見了，不佔空間， visibility : hidden 只是隱形看不見，還是有佔空間。



我們先拉出一個Table如下

1
2
3
4

執行後看起來會像這樣子

1	2
3	4

首先我們替第二行的 tr 加上 style="visibility:hidden"

可以發現我們的Table會變成這樣

1	2

所以當使用 visibility:hidden 時，

物件是確實的被隱藏的，但物件的位置仍舊保持著不會消失

再來我們將第二行的tr改成  style="display:none"

我們的Table會變成

1

2

可以看到第二行連空白也消失了，

所以當使用 style="display:none" 時，

物件連原本所在的位置都一起被隱藏了

二、display : inline

<a> 、 <span> 、 <b> 、 <i> 、 <img> 、 <iframe>、<input>、<em> ... 這幾個 HTML 元素預設的 display 屬性是 inline ，用最簡單的講法解釋 display : inline 就是兩個 display : inline 的元素連在一起會在同一行，不會換行。

display : inline 的 HTML 元素可以有 margin-left 、 margin-right 、 padding-left 、 padding-right ，但不能有 margin-top 、 margin-bottom 、 padding-top 、 padding-bottom 、 width 、 height 、 background-image 。

要讓 display : inline 元素水平置中的方式是在此元素的父元素加上 text-align : center 。

當然你也可以用 CSS 把預設是 display : inline 的 HTML 元素設成 display : block 。

順帶一提， display : inline 元素不該包住 display : block 元素。

三、display : block

<div> 、 <p> 、 <h1> 、 <h2>、<ul>、<li> ... 這幾種 HTML 元素預設的 display 屬性是 block ，除非設定 position 或 float，簡單講就是不管 display : block 元素的前面後面是什麼，碰到 display : block 元素就是會換行，而 display : block 元素的寬度預設會撐到最大。

display : block 元素不管是 margin 、 padding 、 width 、 height 、 background-image 通通都可以。

要將 display : block 元素水平置中，方法是在此元素加上 margin : 0 auto ， 0 可以取代為任何數字。

當然也可以用 CSS 把預設是 display : block 的 HTML 元素設成 display : inline 。

四、display : inline-block

顧名思義，就是外面是 inline ，裡面是 block 。

所以碰到 display : inline-block 元素不會換行，但是又可以設定 padding-top 、 padding-bottom 、 width 、 height 、 background-image 。

用 CSS 讓連結用圖片顯示就是 inline-block 常見的應用。




＊一切看來這麼美好！怎麼可能，你第一天寫 CSS 嗎？下面整理一些比較常遇到的 bug ︰

IE6 IE7 只有預設是 display : inline 的元素才可以設定為 display : inline-block 。

還好有 Hack 讓預設不是 display : inline 的元素在 IE6 IE7 秀成 inline-block ︰

div {
  display : inline-block;
  *display : inline;
  *zoom : 1;
}

在 IE6 display : block 搭配 float : left 或 right 會讓 margin-left 、 margin-right 變兩倍。

解決方法， IE6 自己除以 2 XD ！

div {
  float : left;
  margin-left : 10px;
  _margin-left : 5px;
}

另一種解法就是搭配上上面的 Hack ，讓 display : block 變成 inline-block 囉 ！

div {
  float : left;
  margin-left : 10px;
  _display : inline;
  _zoom : 1;
}