CSS 外邊距合併

admin發表於2018-09-11
CSS

關於外邊距的基本用法可以參閱CSS margin外邊距一章節。

滿足指定條件，外邊距會出現合併現象。

通俗的講，外邊距合併就是相鄰的兩個或者多個外邊距只會產生一個外邊距的效果。

下面就通過程式碼例項來介紹一下出現外邊距合併現象的條件，和如何消除外邊距合併的影響。

一.外邊距產生的條件：

（1）.水平方位不可能產生外邊距合併現象，垂直方位有可能出現。

（2）.絕對定位（absolute/fixed）元素或者浮動元素不會出現外邊距合併。

（3）.相鄰的外邊距之間內容為空，這裡的內容是指邊框和內邊距等。

二.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px; 
} 
.top{ 
  background-color:green; 
  margin-bottom:20px; 
} 
.bottom{ 
  background-color:red; 
  margin-top:10px; 
} 
</style> 
</head> 
<body> 
  <div class="top"></div> 
  <div class="bottom"></div> 
</body> 
</html>

上下兄弟元素的外邊距實現了合併效果，分析如下：

（1）.首先兩個元素的外邊距是在垂直方位上。

（2）.兩個元素都是非浮動或者非定位元素。

（3）.兩個外邊距之間沒有邊框或者內邊距等內容。

外邊距合併最終值的原則是以大的外邊距為標準，小的會被忽略掉。

那麼上面程式碼兩個div的上下距離不是20+10而是20px。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px; 
} 
.top{ 
  background-color:green; 
  margin-bottom:-20px; 
} 
.bottom{ 
  background-color:red;
  margin-top:30px; 
} 
</style> 
</head> 
<body>
  <div class="top"></div>
  <div class="bottom"></div> 
</body> 
</html>

上面程式碼中，垂直兄弟元素，有一方的負外邊距是負數。

那麼最終生效的負外邊距的值是兩個外邊距的和-20+30=10。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
div{
  width:100px; 
  height:100px; 
} 
.top{ 
  background-color:green; 
  margin-bottom:-20px; 
} 
.bottom{ 
  background-color:red; 
  margin-top:-10px;
  position:relative;
  left:30px;
} 
</style> 
</head> 
<body>
  <div class="top"></div> 
  <div class="bottom"></div> 
</body> 
</html>

前一個程式碼中，相鄰的外邊距是一正一負，那麼合併計算方式是兩者相加。

上面的程式碼，相鄰外邊距都是負數，那麼以較小（絕對值大）的外邊距為標準。

那麼就以-20px為準，下面的div元素會向上與上面的div元素重合20px。

上面都是上下兄弟元素的外邊距合併，其實父子元素也能夠實現外邊距合併效果。

父子元素外邊距合併：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#box{ 
  width:200px; 
  height:200px;
  background-color:red; 
} 
#ant{
  width:60px; 
  height:60px; 
  background-color:green; 
  margin:0px auto; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
<div id="box">
  <div id="ant"></div> 
</div> 
</body> 
</html>

上面程式碼中，我們的本意是想讓子元素距離父元素的頂部50px。

然而沒想到的是，子元素和父元素緊貼在一起，而父元素的頂部卻距離它的父元素50px。

就好像是子元素的外邊距一層層的傳匯出去，這就是父子外邊距合併現象，外邊距不會作用與父元素，而是作用於父元素之外的元素。但是這個外邊距合併現象還需要附加一個條件，就是不能觸發父元素的BFC格式化上下文。

關於BFC格式化上下文可以參閱CSS BFC塊級格式化上下文一章節。

上面的父子外邊距和並現象通常是不希望出現的，只要反其道而行之即可，啟用BFC。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#box{ 
  width:200px; 
  height:200px;
  background-color:red; 
  overflow: hidden;
} 
#ant{
  width:60px; 
  height:60px; 
  background-color:green; 
  margin:0px auto; 
  margin-top:50px; 
} 
</style> 
</head> 
<body> 
<div id="box">
  <div id="ant"></div> 
</div> 
</body> 
</html>

只要給父元素新增overflow: hidden;即可啟用BFC，那麼父子元素的外邊距合併現象消失。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box {
  border:1px solid red;
  width:200px;
}
.middle {
  background-color:green;
}
</style> 
</head> 
<body>
  <div class="box">
    <div class="middle" style="margin-top:40px;">
      <div style="margin-top:-40px;">
        <div style="margin-top:130px;">螞蟻部落</div>
      </div>
    </div>
  </div> 
</body> 
</html>

前面所有的外邊距合併都是兩個外邊距之間進行的。

上述程式碼是三個外邊距合併，當然也可以是更多個外邊距合併。

已經介紹過，兩個一正一負外邊距合併，那麼只要簡單計算兩者的和即可。

如果多個正負混雜的外邊距合併，只要找出負值中最小（絕對值最大）的，正值最大的求和。

那麼上面的最終外邊距是-40+130=90。

理論最後驗證：

只要滿足外邊距合併的條件，那麼就可以出現外邊距合併現象。

看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box {
  border:1px solid red;
  width:200px;
}
.ant {
  margin-bottom:50px;
  margin-top:50px;
}
</style> 
</head> 
<body> 
<div class="box">
  <div class="ant"></div>  
</div> 
</body> 
</html>

如果沒有外邊距合併現象，那麼父元素的高度將會是100px。

但是子元素的上下外邊距出現了合併，最奇怪的是同一個元素的上下外邊距合併。

因為這一切符合外邊距合併的理論：

（1）.外邊距在垂直方位。

（2）.因為沒有高度，所以元素沒有內容，兩個外邊距之間為空。

相關文章