Margin會重疊，你造嗎

時間 2019-11-17

標籤 margin 重疊欄目 CSS 简体版

原文原文鏈接

之因此要專門寫一篇文章去解釋margin重疊，一是由於前面的文章裏有提到過，怕有些童鞋不瞭解；二是要寫的內容不是三言兩語就能說清楚的。css

在講重疊以前，咱們先來了解一下margin這個屬性。html

一. margin 基礎講解

這個屬性呢，太常見，我就大概講講，有幾點你們注意一下就好。chrome

margin, 實爲margin-left, margin-right, margin-top, margin-bottom的一個簡寫，這些子屬性分別用來設置box的左 / 右 / 上 / 下外邊距的寬度，它們的具體用法以下：瀏覽器

屬性名: margin-left / margin-right / margin-top / margin-bottom
值: <length> | <percentage> | inherit
初始值: 0
繼承性: 無
應用對象：全部dom元素，除了display爲table-row-group,table-row, table-column-group, table-column, table-header-group, table-footer-group, table-cell
百分比：參考containing block的寬度
計算值（ computed value，參考第4條）：開發人員指定的百分比值或一個絕對長度

有一些使用細節須要說明一下：bash

margin-top和margin-bottom在inline box(看第18條)上沒有任何效果。
屬性值設爲百分比時，參考對象爲containing block的寬度，即便是margin-top，margin-bottom也是醬紫的
margin設爲一個值時，代表四個子屬性均爲此值；設爲兩個值時，代表margin-top和margin-bottom將爲第一個值，margin-left和margin-right將爲第二個值；設爲三個值，代表margin-top取第一個值，margin-left和margin-right取第二個值，margin-bottom取第三個值；設爲四個值，則按照top, right, bottom, left的順序從第一個值開始設置。例如：

margin:20px;  等同於 全部邊均爲20px

margin:10px 20px; 等同於 margin-top & margin-bottom爲10px, margin-left & margin-right爲20px

margin:10px 20px 30px; 等同於 margin-top爲10px, margin-left & margin-right爲20px, margin-bottom爲30px

margin:10px 20px 30px 40px; 等同於 margin-top爲10px,margin-right爲20px,margin-bottom爲30px,margin-left爲40px複製代碼

嗯哼~蠻簡單的~~那就來點複雜的吧！dom

二. margin 重疊詳解

何爲margin重疊？兩個或多個box的相鄰margin合在一塊兒，成爲一個margin。其實就是兩個margin重疊在一塊，那麼呈現出來的效果固然是一個的咯。spa

如何才能產生這種效果呢？3d

首先，你得保證用的是垂直方向的margin（margin-top & margin-bottom）。你要是用margin-left和margin-right，試一百次都不會出現！code

其次，應用對象要選好。不是全部box均可以！（忽然以爲css裏的規則一套一套的，水好深~~）orm

最後，重疊的環境要準備好。即便對象選好了，重疊也不是百分百就有，只有知足特定的條件纔會產生。

重疊對象

在我說出以前，你們能夠先想一想哪些對象會有margin重疊。

咱們能夠試試排除法。CSS中的box無非就四種：float box，absolute positioned box，inline-level box， block-level box。

看過前面的定位文章的童鞋應該知道，float box和absolute positioned box都會脫離正常流而自成一條流，流與流之間是各玩各的，互不干擾，那麼咱們能夠先排除這兩種。而inline-level box在渲染過程當中會參與inline formatting context，這個上下文中的box不會發生margin重疊。那麼剩下的只有block-level box。

那麼，全部的block-level box都會發生重疊嗎？

是的，可是——要排除root box（第28條）。

如今，咱們大體知道重疊對象會是兩個block-level box(不包括root box)。這只是一個初篩條件，這兩個重疊對象還必須同屬一個block formatting context，具體爲何呢，看看以前介紹bfc的文章就明白了。

重疊環境

對於一個符合條件的box而言，如下任何一種狀況都會發生重疊：

top margin 與它的第一個處於普通流中的孩子的top margin
height 爲auto，它的bottom margin 與它的最後一個處於普通流中的孩子的bottom margin
bottom margin 與它的下一個處於普通流中的兄弟的top margin
overflow爲visible（即該box不會創建bfc）, min-height 的computed value(第四條)爲0，height的computed value爲0或auto，無孩子box，它的top margin與bottom margin

特例：overflow不爲visible的block-level box的margin不會與它的任何在普通流中的孩子發生margin 重疊，但可與處在同一bfc的兄弟box發現margin 重疊。

咱們來看看示例：

例1：父box與第一個子孩子box

<!DOCTYPE>
<html>
  <head>
      <style>
          .parent{
              margin-top:20px;
              margin-bottom:10px;
              background-color: #e6e96e;
          }
          .child{
              background-color: aquamarine;
          }
          .first{
            margin-top:30px;
            margin-bottom:30px;
          }
      </style>
  </head>
  <body>
    <div class='parent'>
        <div class='child first'>haha</div>       
    </div>
 </body>
</html>複製代碼

chrome瀏覽器顯示：

很明顯，二者margin發生重疊。

例2：box自身的top margin與bottom margin發生重疊 && 兄弟box之間margin重疊 && overflow不爲visible的box不與孩子box發生margin重疊

<!DOCTYPE>
<html>
  <head>
      <style>
          .parent{
              width:500px;
              min-height: 0;
              height:auto;
              margin-top:20px;
              margin-bottom:10px;
              background-color: #e6e96e;
          }
          .parent-second{
              overflow:hidden;
          }
          .child{
              background-color: aquamarine;
          }
          .first-child{
            margin-top:30px;
            margin-bottom:30px;
          }
          .second-child{
              width:200px;
              margin-top:60px;
              margin-bottom:60px;
          }
      </style>
  </head>
  <body>
    <div class='parent'>
    </div>
    <div class='parent parent-second'>
            <div class='child first-child'>haha in second div</div>
            <div class='child second-child'>lala in second div</div> 
    </div>
 </body>
</html>複製代碼

chrom顯示以下：

咱們看第一個 div.parent ，它的top margin與bottom margin發生重疊，這個重疊結果又與div.parent.second-parent的top margin發生重疊，因此頁面最上方的空白處margin只有20px，這個數值能夠經過查看div.parent.second-parent的margin獲得（下圖的橙色部分）。

由上圖，咱們也能夠看到，div.parent.second-parent並未與本身的第一個孩子box發生margin 重疊。

重疊margin計算

假設第一個box的top margin值爲A，它的第一個子孩子的top margin值爲B，二者margin重疊，重疊結果會按以下規則計算：

A，B均爲正值，則取max(A, B)
A爲負值，B爲正值，則爲B-|A|
A，B均爲負值，則取0-max(|A|，|B|)

來個例子

爲了更好的展現重疊結果，將html元素的top margin設爲100px（注：html元素產生的是root box，不會發生margin重疊），同時去掉瀏覽器爲body設置的margin。

<!DOCTYPE>
<html>
  <head>
      <style>
          html{
            margin-top:100px;
          }
          *{
            margin-top:0;
            margin-bottom:0;
          }
          .parent{
              width:100px;
              height:100px;
              background-color: #e6e96e;
          }
          .child{
              width:100%;
              height:100%;
              background-color: aquamarine;
          }
      </style>
  </head>
  <body>
    <div class='parent'>
        <div class='child'>haha</div>       
    </div>
 </body>
</html>複製代碼

chrome展現以下：

例3：A爲負值，B爲正值

爲div.parent及div.child加上margin-top

.parent{
              width:100px;
              height:100px;
              margin-top:-60px;
              background-color: #e6e96e;
          }
          .child{
              width:100%;
              height:100%;
              margin-top:10px;
              background-color: aquamarine;
          }複製代碼

chrome裏顯示以下：

用inspect方式查看margin的範圍：

能夠看到，重疊margin值爲html元素所設margin值的一半，即50px。它背後的運算過程是：10-|-60| = -50

例4：A, B均爲負值

爲兩個div加上margin-top

.parent{
              width:100px;
              height:100px;
              margin-top:-10px;
              background-color: #e6e96e;
          }
          .child{
              width:100%;
              height:100%;
              margin-top:-50px;
              background-color: aquamarine;
          }複製代碼

chrome顯示以下：