當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

margin塌陷问题

發布時間：2024/4/15 编程问答 72 豆豆

生活随笔收集整理的這篇文章主要介紹了 margin塌陷问题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

magin塌陷現象：在垂直方向，父子關系兩個盒子中margin大的覆蓋margin小的，導致兩個盒子有同一個margin.

<style>

.div1{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
.div2{
width: 50px;
height: 50px;
background-color: green;

margin-top:70px;

}
</style>
<body>

</body>

正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.

但由于margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.

結果：本應該是子元素的margin-top=70px(子元素的margin是相對于父元素的),父元素的等于50px,但最后結果子元素和父元素的margin-top都為70px.

解決辦法：

1.父元素加border,注意加border時一定要有solid(不管寫不寫顏色)，沒寫solid僅僅有個border:1px,瀏覽器實際上是沒渲染border的。(不建議使用)

2.父元素加padding(不建議使用)

3.改變bfc(塊級格式上下文)

改變父級的渲染規則有以下四種方法,給父級盒子添加

(1)position:absolute/fixed

(2)display:inline-block;

(3)float:left/right

(4)overflow:hidden

這四種方法都能觸發bfc,但是使用的時候都會帶來不同的麻煩,具體使用中還需根據具體情況選擇沒有影響的來解決margin塌陷

?bfc:

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，
都會為他們的內容創建新的BFC（塊級格式上下文）。

特殊情況：下面這種也形成了margin塌陷，父級是body,子級div2沒有相對body定位，而是和body一起用一個margin.div1脫離了文檔流，不會相對body定位，但div2得相對body定位。

出現這種情況的條件是body有一個div脫離了標準流。

}
.box2{
width: 100px;
height: 100px;
background-color: gray;
margin-top: 100px;
}

</style>
<body>

</body>

解決辦法：和上面同理，只是父級變成了body

轉載于:https://www.cnblogs.com/shiyuzuxia/p/9729912.html

以上是生活随笔為你收集整理的margin塌陷问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。