主要問題：常常 margin-top 失效，造成版面的外間距壞掉的問題？
在網頁編排的時候，最常用到的動作就是調整文字元素或圖片元素的間距，要文字下來一點、過去一點、左邊一點… 尤其，有時遇到自稱從小就學過美工的老版時，見一次調整一次，再見一次又再調整一次….就當作是練身體一樣，每每都弄到讓咱們網頁設計師在心裡狂翻桌。
margin-top 失效這個問題主要是由於 W3C 的標準規則所告成的，W3C 規定在第一個子物件使用 margin-top 的時候，會被父層物件拿去用，例如當 <DIV> 裡面的第一段文字使用 margin-top 的時候，我們所預期的上間距效果不會出現在第一段文字上面，反而是父層的<DIV> 產生了上間距。同理，W3C 的標準規則在最後一個子物件使用 margin-bottom 的時候，會被父層物件拿去用！
因此，還常常有人在網路上搜尋「CSS 失控的 margin top 」呢！哈哈哈哈哈…
使用 margin-top 外間距
調整文字元素或圖片元素的外間距，理所當然是要使用 margin 語法，然而，當我們高高興興完成網頁排版，心想趕快收拾包包下班走人時，慘劇往往就發生在各個瀏覽器的不一致問題之中，想下班~ 先搞定每個瀏覽器再說吧~ T^T
Step 1
我們使用一個 <div> 然後在裡面放了 <h2> 和 <h5> 兩段文字，範例如下圖所示 ↓
Step 2
開啟一個 CSS 檔，為 div 寫上寬度、高度和背景圖片，範例如下圖所示 ↓
Step 3
上面的 CSS 寫好之後，在 Dreamweaver 內看到的狀況還算正常，範例如下圖所示 ↓
Step 4
回到 CSS 再幫 <h2> 和 <h5> 兩段文字調整出我們需要的外間距大小，範例如下圖所示 ↓
第 12 行： 先使用 margin:0; 把原本容易造成誤差的預設間距設為 0 ，如此比較容易在各瀏覽器得到相同的結果。
HTML 標籤的預設值請參考這一篇「Default style sheet for HTML 4」
第 13 行：設定 <h2> 文字與 <div> 的上間距 margin-top:25px;
第 14 行：設定 <h2> 文字與 <div> 的左間距 margin-left:25px;
Step 5
上面的 CSS 寫好之後，在 Dreamweaver 內看到的狀況，範例如下圖所示 ↓
Step 6
等一下為了使用各個瀏覽器測試的時候要示範清楚一點，我們先把 <div> 複製成 4 個，範例如下圖所示 ↓
Step 7
使用 IE 瀏覽器來測試看看，結果 OK OK 沒問題，範例如下圖所示 ↓
Step 8
使用 Firefox 和 google 瀏覽器來測試看看，結果怎麼差這麼多 margin-top 失效了…… 範例如下圖所示 ↓
馬上召喚 google 大神搜尋一下，果然有很多人也遇到這種問題！
聽說，區塊內的第一個子元素的 margin-top 會失效，會被上層的爸爸給搶走，簡單的說，我們這個範例中的 <h2> 文字所設定的 margin-top:25px; 會被 <div> 給搶走了，所以 <h2> 文字本身的上間距沒有了，反而是每個 <div> 都多了上間距…..寫 CSS 果然是咱們網頁設計師鍛練 EQ 的好朋友！
除了第一個子元素的 margin-top 失效會被上層的爸爸 <div> 給搶走之外，還會發生另一個問題，那就是如果 上層的 <div> 本身也有寫 margin-top 的時候，當 <div> 的 margin-top 比下面的第一個子元素 <h2> 的 margin-top 還大的時候，這時 <div> 就會以自己的 margin-top 來呈現上間距，但是 子元素 <h2> 的 margin-top 還是會失效被爸層搶走，照搶了不誤，但是不會呈現出來，而當 <div> 的 margin-top 比下面的第一個子元素 <h2> 的 margin-top 還小的時候，這時 <div> 就會以搶來的子元素 <h2> 的 margin-top 來呈現上間距…..什麼跟什麼嘛！！
這是 W3C 官方規定的規則喔~ 詳細內容請參考 W3C 公佈的 「8.3.1 Collapsing margins」
Step 9
好吧，問題發生都發生了，看來要使出殺手破解法了~
第 13 行：寫上 display:inline-block; 聽說可以解決這個問題，把 margin-top 搶回來，範例如下圖所示 ↓
Step 10
使用 Firefox 和 google 瀏覽器來測試看看，結果…哇哈哈哈…正常了， 非要人家下重手才肯聽話，範例如下圖所示 ↓
Step 11
其實呢，咱們來回想一下 margin 這傢伙帶來的問題，這可不是頭一遭了~
之前也發生過，當同時使用 float 和 margin 時，在 IE 瀏覽器呈現出來的 marign 就會變成 2 倍大的問題….
還記得嗎，忘記的同學請參考一下這一篇「在 IE 6 同時使用 float 和 margin 時~ 會出問題」
Step 12
該用 margin 還是 padding 來調整間距比較好呢？
在飛肯上課的時候，我常常跟同學說，有些地方理論上是要使用 margin 沒有錯，但是平時在寫內容文字的時候我倒是比較喜歡使用 padding 來調整間距，因為使用 padding 排版出來的結果會是相同的，不會出什麼問題，而且在每一個瀏覽器也都可以一模一樣，寫內容文字的時候漸漸的就比較少使用 margin 來調整間距，使用 margin 比較會出現失效的問題，基於懶人手則之懶~懶~懶~ 別想這麼多，大多時候就都使用 padding 吧~
第 13 行、第 14 行 都改用 padding 來做，結果是 OK 的啦~~ 範例如下圖所示 ↓
CSS 的排版技巧日新月異，一直都會有新的技巧出現，如果同學有發現更好的解決方法，可以來這兒分享給大家喔！
感謝~
by
姜智豪
老師
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
