margin塌陷

時間 2019-12-09

標籤 margin 欄目 CSS 简体版

原文原文鏈接

一：什麼是margin塌陷

在標準文檔流中，豎直方向的margin會出現疊加現象（水平方向不會塌陷），兩個margin緊挨着，中間沒有border或者padding
margin直接接觸，就產生了合併
表現爲較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有一個較大的margin，這就是margin塌陷現象瀏覽器

二：margin塌陷的分類

一、兄弟關係的盒子
二、父子關係的盒子spa

兄弟並列code

 1 <style>
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 .box1{
 7     width:200px;
 8     height:200px;
 9     background: yellowgreen;
10     margin-bottom: 50px;
11 }
12 .box2{
13     width:200px;
14     height:200px;
15     background: gray;
16     margin-top: 40px;
17 }
18 </style>

對box1咱們爲其設置margin-bottom：50px;

對box2咱們爲其設置margin-top： 40px;

以下圖所示：blog

兩盒子之間的距離僅是50px，也就是說兩盒子之間的margin出現了重疊部分，故而咱們能夠得出：垂直之間塌陷的原則是以兩盒子最大的外邊距爲準。文檔

父子關係it

 1 /*CSS部分*/
 2 <style>
 3 .box1{
 4     width:400px;
 5     height:400px;
 6     background: pink;
 7 }
 8 .box2{
 9     width:200px;
10     height:200px;
11     background: lightblue;
　　　　margin-top：10px
12 }
13 </style>
14 /*HTML部分*/
15 <body>
16     <divclass="box1">
17     <divclass="box2"></div>
18 </div>
19 </body>

當爲子盒子添加margin-top：10px;時會發生以下狀況：io

子盒子和父盒子之間並沒出現指望的10px間隙而是父盒子與子盒子一塊兒與頁面頂端產生了10px間隙。table

解決方法：class

1.給父元素增長邊框

爲了避免影響原先的圖像效果，能夠將邊框顏色設置爲白色（與瀏覽器背景顏色一致）。方法

2.溢出隱藏

在父元素的style裏面添加overflow：hidden；

3.利用浮動

給父元素的style添加浮動，可是這種方法不推薦使用。由於會帶來未知的錯誤。

4.給父元素添加position:fixed;

這裏用到了定位的知識，將父元素顯示在固定位置，就不會受margin-top塌陷的問題影。

5.使用僞元素

1 .clearfix::before{ 
2 content: 」「」; 
3 display: table; 
4 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。