div外邊距重合問題及解決方法

本篇文章為大家帶來了關於css的相關知識，其中主要介紹了關於如何解決div外邊距重合的相關問題，外邊距的重疊只產生在普通流文檔的上下外邊距之間，只有塊元素會發生外邊距重疊，行內元素和行內塊元素都不會發生外邊距重疊問題，下面一起來看一下，希望對大家有幫助。

（學習影片分享：css影片教學、html影片教學）

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

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

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

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

margin值重疊計算的方法：

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

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

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

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

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

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

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

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

<div></div>
<div></div>
 
#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合併

<div>
   <div></div>
</div>
#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 ，不然子元素部分內容就會被隱藏掉

方法二：給父元素加邊框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或高度來解決這個問題。 ###

  <div></div>
  <div></div>
  <div></div>
  <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 ;
    }</style>

###加了border或padding後，與上下兩個元素的間距分別為50px和100px,沒加之前，上下兩個元素的間距為100px##########第四種情況： 高度為auto的父元素的margin-bottom和子元素的margin-bottom發生重疊#########父元素設定border-bottom、padding-bottom來分隔它們，也可以為###

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

#三、外邊距重疊是怎麼算的

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

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

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

（學習影片分享：css影片教學、html影片教學）

以上是div外邊距重合問題及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！