div外邊距重合問題如何解決

本文小編為大家詳細介紹“div外邊距重合問題如何解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“div外邊距重合問題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

CSS 外邊距重疊(外邊距塌陷)

塊的上外邊距(margin-top)和下外邊距(margin-bottom)有時合并(折疊)為單個邊距，其大小為單個邊距的最大值(或如果它們相等，則僅為其中一個)，這種行為稱為邊距折疊。

邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一起而形成一個單一邊界。

換句話說，外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，起外邊距會產生重疊現象，且重疊后的外邊距，等于其中較大者。

margin值重疊計算的方法：

• margin值都為正，取兩者的最大的值。

• 出現負邊界，用最大的正邊界減去絕對值最大的負邊界。

• 如果沒有正邊界，則從零中減去絕對值最大的負邊界。

一、哪些元素會發生外邊距重疊問題

外邊距的重疊只產生在普通流文檔的上下外邊距之間， 只有 塊元素 會發生外邊距重疊，行內元素 和 行內塊元素 都不會發生外邊距重疊問題

二、什么情況下會發生外邊距重疊呢

第一種情況： 相鄰兄弟元素的marin-bottom和margin-top的值發生重疊

發生邊界重疊，只會挑選最大邊界范圍留下，所以兩者之間的邊距為100px
如果需要解決這個邊界重疊問題，則需在后一個元素加上float 或 給其中一個兄弟套上一個p，設置border:1px solid white;

<p id="box1"></p>
<p id="box2"></p>

#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-bottom: 50px;
     margin-top: 50px;
 }
 #box2{
     width: 200px;
     height: 200px;
     background: lightcoral;
     margin-top:100px ;
     opacity: 0.3;
     float: left;   //加上float后，兩者間距為150px
 }

第二種情況：父級和第一個/最后一個子元素的margin合并

<p id="box1">
   <p id="box3"></p>
</p>
#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
 }
 #box3 {
   width: 100px;
   height: 100px;
   background-color: #f12416;
   margin-top: 50px;
 }

例子的效果如下圖：

當同時設父元素和子元素的margin-top都為50px時，父元素和子元素都距離邊界50px，而不是我們認為的子元素距離父元素50px。

當父元素不設置上邊距，子元素設置margin-top為50px時，此時還是父子元素距離頂端50px

解決方法：

方法一：給父元素加overflow：hidden；

這種方法解決了我們外邊距重疊問題，但是這個方法只適用于 “子元素的高度加上外邊距高度小于父元素高度(childHeight +margin-top<parentHeight)” ，不然子元素部分內容就會被隱藏掉

方法二：給父元素加邊框 border（可以加個透明的邊框）

方法三：給父級或者子級設置display:inline-block;

既然只有塊元素會產生外邊距重疊，那么我們就讓它不是塊元素，把它設置為行內塊元素

方法四：給父級或者子級設置float

方法五：給父級或者子級設置position: absolute;

方法六：給父元素添加padding

#box1{
     width: 200px;
     height: 200px;
     background: lemonchiffon;
     margin-top: 50px;
     /*overflow:hidden;*/
     /*border: 1px solid #00000000;*/
     /*display: inline-block;*/
     /*float:left;*/
     /*position: absolute*/
     /*padding: 10px;*/
 }
 #box3 {
        width: 100px;
        height: 100px;
        background-color: #f12416;
        margin-top: 50px;
        /*display: inline-block;*/
        /*float:left;*/
        /*position: absolute*/
    }

第三種情況：空的塊級元素

自身的margin-top和margin-bottom發生的重疊。我們可以通過為其設置border、pa
dding或者高度來解決這個問題。

  <p id="box1"></p>
  <p id="box2"></p>
  <p id="box3"></p>
  <style>
 #box1{
      width: 200px; height:200px;
      background:lightseagreen;
      margin-bottom:50px ;
    } 
    #box2{
      margin-top: 20px;
      margin-bottom:20px ;
      border: 1px solid salmon; //加了border或padding后，與上下兩個元素的間距分別為50px和100px,沒加之前，上下兩個元素的間距為100px
      /*padding: 1px; */
    }
    #box3{
      width: 200px; height:200px;
      background:darkgoldenrod;
      margin-top:100px ;
    }

加了border或padding后，與上下兩個元素的間距分別為50px和100px,沒加之前，上下兩個元素的間距為100px

第四種情況： 高度為auto的父元素的margin-bottom和子元素的margin-bottom發生重疊

父元素設置border-bottom、padding-bottom來分隔它們，也可以為

父元素設置一個高度，max-height和min-height也能解決這個問題

三、外邊距重疊是怎么算的

• 全部都為正值，取最大者；

• 不全是正值，則都取絕對值，然后用正值減去最大值；

• 沒有正值，則都取絕對值，然后用0減去最大值。

讀到這里，這篇“div外邊距重合問題如何解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。