1.上下margin重疊問題

HTML:

<div class="box1"></div>
<div class="box2"></div>

CSS:

* {
      margin: 0;
      padding: 0;
        }
.box1 {
       height: 100px;
       width: 100px;
       background-color: pink;
       margin-bottom: 50px;
        }
.box2 {
       width: 100px;
       height: 100px;
       background-color: green;
       margin-top: 100px;
     }
 

說明：

有兩個元素box1和box2, box1元素設定margin-bottom, box2元素margin-top, 此時上下margin會重疊; 誰的取值大以誰為準

解決方案：

1.只給其中一個元素設定margin值

.box1 {
    height: 100px;
    width: 100px;
    background-color: pink;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 50px;
}

2. 給其中一個元素新增父元素，並且給父元素新增overflow:hidden;
   (BFC(塊級格式化上下文) 佈局)

HTML:

<div class="box">
    <div class="box1"></div>
</div>
<div class="box2"></div>

CSS:

* {
    margin: 0;
    padding: 0;
}
.box {
    overflow: hidden;
}
.box1 {
    height: 100px;
    width: 100px;
    background-color: pink;
    margin-bottom: 50px;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 50px;
}
 

2.margin-top穿透問題

說明：

給子元素設定的margin-top值，會作用到父元素的身上，這種想象稱之為margin-top的穿透問題

解決方案：

1.給父元素新增border

弊端：需要進行盒模型計算，此操作會使父元素寬高各增加2px

.box {
    height: 200px;
    width: 200px;
    background-color: pink;
    border: 1px solid red;
}

2.給父元素新增overflow:hidden

弊端：使用定位時超出盒子的元素，溢位會被隱藏

.box {
    height: 200px;
    width: 200px;
    background-color: pink;
    overflow: hidden;
}

3.使用父元素的padding-top代替子元素margin-top

.box {
    /* 高度減去50px */
    height: 150px;
    width: 200px;
    background-color: pink;
    padding-top: 50px;
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: green;
}