iT邦幫忙

1

CSS 新手容易誤踩的margin地雷

css
WM 2019-06-21 16:48:26696 瀏覽

在練習的過程中,踩到了margin的地雷。

明明屬性值都對,在chrome的開發人員工具看,也都正常。

但版型就是不對,花了一段時間才找到原因。

來看看問題是怎麼發生的。

HTML

<div class="box-black">    
    <div class="box-red"></div>
    <div class="box-blue"></div>
</div>

CSS

html {
  background-color: chartreuse;
}

* {
  box-sizing: border-box;
}

.box-black {
  width: 300px;
  height: 300px;
  background-color: black;
  margin-top: 20px;
}

.box-red {
  height: 100px;
  background-color: red;
}

.box-blue {
  height: 100px;
  background-color: blue;
}

引入ResetCSS.css。

為了顯示頁面(HTML)背景,特意顯示為螢光綠。

一開始的頁面。
https://ithelp.ithome.com.tw/upload/images/20190621/20112573wUsn4QErOP.png
完全貼齊頁面的上邊界與左邊界。

在.box-black設定

margin-top: 20px;

https://ithelp.ithome.com.tw/upload/images/20190621/2011257378A0CWI4bA.png
資訊顯示,margin-top是20px,.box-black的確是有往下推移。

接著,把margin-top: 20px的設定從.box-black移除。

再將margin-top: 20px加入.box-red。

.box-black {
  width: 300px;
  height: 300px;
  background-color: black;      
}

.box-red {
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

頁面應該是這樣,沒錯。
https://ithelp.ithome.com.tw/upload/images/20190621/20112573QD2WVjMjAA.png
.box-black沒有設定margin-top,所以會貼齊上邊界。
.box-red設定margin-top: 20px,所以會向往下推移20px。

錯,真正的頁面是這樣。
https://ithelp.ithome.com.tw/upload/images/20190621/20112573LydAdIQ638.png
咦!怎會這樣?

https://ithelp.ithome.com.tw/upload/images/20190621/201125736zdJPGBctI.png
.box-black沒有margin-top設定,卻往下推移了。

https://ithelp.ithome.com.tw/upload/images/20190621/20112573jBdu3BeUam.png
.box-red沒有在.box-black裡面向下推移,不僅貼齊.box-black上邊界。

而且,它還把.box-black往下推移。

這是怎麼一回事?

我們在.box-black設定

margin-top: 10px;

https://ithelp.ithome.com.tw/upload/images/20190621/20112573eAFQgzmj0N.png
.box-black的margin-top有出現,但還是被推移超過10px的範圍。

所以,我的推測是,.box-red與.box-black的margin-top重疊了,導致這樣的結果。

那我們將.box-black的margin-top改成50px。
https://ithelp.ithome.com.tw/upload/images/20190621/20112573jn1xmwy3A2.png

.box-black往下推移50px。

所以不只重疊,還以數值大的為主。

但,.box-red無法在.box-black裡面,往下推移的問題還是沒有解決。

我們在.box-black加入

padding-top: 10px;

https://ithelp.ithome.com.tw/upload/images/20190621/20112573p6BqrXiZOc.png

.box-red往下推移了,但間距似乎有點大。

來看看細節。

https://ithelp.ithome.com.tw/upload/images/20190621/20112573MKdCX7AN5a.png

.box-red推移範圍超過20px,我們再看看.box-black的部分。

https://ithelp.ithome.com.tw/upload/images/20190621/20112573jAcHnMiKxl.png

可以很明顯的看出,.box-black的padding-top將.box-red往下推10px,並且margin-top將自身往下推50px。

而且.box-black的padding-top與.box-red的margin-top並沒有重疊。

所以只要使用padding將兩個同邊的margin隔開,這個問題就可以解決了。

.box-black {
  width: 300px;
  height: 300px;
  background-color: black;
  padding-top: 20px;
}
.box-red {
  height: 100px;
  background-color: red;      
}

頁面就會這樣。
https://ithelp.ithome.com.tw/upload/images/20190621/20112573oL53vcfxUc.png

利用.box-black的padding-top去推移.box-red,而不要使用.box-red的margin-top。

剛剛是父層與子層的關係,現在來看同層的關係。

.box-red {
 height: 100px;
 background-color: red;
 margin-bottom: 10px;
}
.box-blue {
  height: 100px;
  background-color: blue;
  margin-top: 10px;
}

有了剛剛的觀念,這次.box-red與.box-blue的間距,絕對不會是20px,是吧。
https://ithelp.ithome.com.tw/upload/images/20190621/2011257348VPl3SHNH.png

沒錯,確實如此,它們的margin重疊了,間距只有10px。

修改.box-red

margin-bottom: 50px;

https://ithelp.ithome.com.tw/upload/images/20190621/20112573tfOnk6411r.png

同樣地,間距會以數值大的那方為主。


尚未有邦友留言

立即登入留言