CSS 語法教學 – margin-top 失效!外間距會直接影響到上一層

調整間距

在網頁編排的時候,最常用到的動作就是調整文字元素或圖片元素的間距,要文字下來一點、過去一點、左邊一點… 尤其,有時遇到自稱領導統御型的老版時,見一次調整一次,再見一次又再調整一次….就當作是練身體一樣,每每都弄到讓咱們網頁設計師在心裡狂翻桌。

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan151

使用 margin 外間距

調整文字元素或圖片元素的外間距,理所當然是要使用 margin 語法,然而,當我們高高興興完成網頁排版,心想趕快收拾包包下班走人時,慘劇往往就發生在各個瀏覽器的不一致問題之中,想下班~ 先搞定每個瀏覽器再說吧~ T^T

 

Step 1

我們使用一個 <div> 然後在裡面放了 <h2> 和 <h5> 兩段文字,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-01


 

Step 2

開啟一個 CSS 檔,為 div 寫上寬度、高度和背景圖片,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-03

 


 

Step 3

上面的 CSS 寫好之後,在 Dreamweaver 內看到的狀況還算正常,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-04

 


Step 4

回到 CSS 再幫 <h2> 和 <h5> 兩段文字調整出我們需要的外間距大小,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-05

第 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 內看到的狀況,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-06


 

Step 6

等一下為了使用各個瀏覽器測試的時候要示範清楚一點,我們先把 <div> 複製成 4 個,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-07


 

Step 7

使用 IE 瀏覽器來測試看看,結果 OK OK 沒問題,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-08


 

Step 8

使用 Firefox 和 google 瀏覽器來測試看看,結果怎麼差這麼多 margin-top 失效了…… 範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-09

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-10

馬上召喚 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 搶回來,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-11


 

Step 10

使用 Firefox 和 google 瀏覽器來測試看看,結果…哇哈哈哈…正常了, 非要人家下重手才肯聽話,範例如下圖所示 ↓

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-15

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-16


 

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 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - flycan-14

margin-top 版範例預覽】【範例下載

padding-top 版範例預覽】【範例下載

 

CSS 的排版技巧日新月異,一直都會有新的技巧出現,如果同學有發現更好的解決方法,可以來這兒分享給大家喔!

感謝~

 

 

CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - smil49093ce533e25 CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - smil49093ce533e25 CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - smil49093ce533e25 CSS 語法 - 網頁設計  - CSS 語法教學 - margin-top 失效!外間距會直接影響到上一層 - smil49093ce533e25

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , , .

迴響已被關閉。