如何禁用邊緣摺疊？

Question

是否有辦法完全禁用邊界摺疊？我發現的唯一解決方案（通過名稱「uncollapsing」）需要使用1px邊框或1px填充。我覺得這是不可接受的：無關的像素使計算複雜化，沒有理由。有沒有更合理的方法來禁用這個邊緣摺疊？

Answer 1

主要有兩種類型的保證金崩潰：在相鄰元件之間

• 摺疊利潤率
• 摺疊父和子元素

之間的利潤使用填充或邊框將防止崩潰只在後一種情況。此外，overflow與應用於父級的默認值（visible）不同的值將防止崩潰。因此，overflow: auto和overflow: hidden都具有相同的效果。也許使用hidden時唯一的區別是隱藏內容的意想不到的後果，如果父母具有固定的高度。

，一旦應用於父其它性能，可以幫助解決這個問題是：

• float: left/right
• position: absolute
• display: inline-block

你可以在這裏測試他們都： http://jsfiddle.net/XB9wX/1/。

我應該補充說，像往常一樣，Internet Explorer是個例外。更具體地說，在爲父元素指定某種佈局時，IE 7邊距不會摺疊，例如width。

來源：SitePoint的文章Collapsing Margins

Answer 2

overflow:hidden可以防止塌陷餘量，但它不是免費的副作用 - 即它...隱藏溢出。

除了這個以及你所提到的，你只需要學習它們，並在今天學習，當他們真正有用（每3到5年）。

Answer 3

您也可以使用這個好老微clearfix。

#container:before, #container:after{ 
    content: ' '; 
    display: table; 
} 

見更新小提琴：基於http://jsfiddle.net/XB9wX/97/

Answer 4

每一個WebKit瀏覽器應該支持的屬性-webkit餘裕崩潰。還有一些子屬性只能將其設置爲頂部或底部邊距。您可以將值設爲collapse（默認值），放棄（如果存在相鄰邊距，則將邊距設置爲0），並將其分隔（防止邊距摺疊）。

我測試過這個版本適用於2014版Chrome和Safari。不幸的是，我不認爲這會在IE中被支持，因爲它不是基於webkit。

閱讀Apple's Safari CSS Reference有完整的解釋。

如果您檢查Mozilla's CSS webkit extensions page，它們將這些屬性列爲專有，並建議不要使用它們。這是因爲他們很可能不會很快進入標準CSS，只有基於webkit的瀏覽器纔會支持它們。

Answer 5

一個巧妙的方法來禁用保證金崩潰不具有視覺衝擊力，因爲據我所知，在父的填充設置爲0.1px：

.parentClass { 
    padding: 0.1px; 
} 

的填充不再是0，所以壓扁贏得」 t發生了，並且填充小於0.5px，因此在視覺上它將舍入爲0.

如果需要其他填充，則僅將填充應用於不需要使用邊緣摺疊的「方向」，例如padding-top: 0.1px;。

工作例如：

.noCollapse { 
 
    padding: 0.1px; 
 
} 
 

 
.parent { 
 
    background-color: red; 
 
    width: 150px; 
 
} 
 

 
.children { 
 
    margin-top: 50px; 
 

 
    background-color: lime;  
 
    width: 100px; 
 
    height: 100px; 
 
}

<h3>Border collapsing</h3> 
 
<div class="parent"> 
 
    <div class="children"> 
 
    </div> 
 
</div> 
 

 
<h3>No border collapsing</h3> 
 
<div class="parent noCollapse"> 
 
    <div class="children"> 
 
    </div> 
 
</div>

Answer 6

我知道，這是一個很老的文章，但只是想說，使用父元素Flexbox的將禁用保證金坍塌其子元素。

Answer 7

我有類似的問題，因爲家長有position設置爲相對邊緣崩潰。以下是可用於禁用邊緣摺疊的命令列表。

這裏是操場自我測試

剛剛嘗試任何parent-fix*類分配給div.container元素，或任何一類children-fix*到div.margin。選擇最適合您需求的產品。

當

• 保證金倒塌是禁用，div.absolute用紅色背景將被放置在頁面的最頂端。
• 利潤率崩潰div.absolute將被定位在相同的Y座標爲div.margin

html, body { margin: 0; padding: 0; } 
 

 
.container { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.absolute { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50px; 
 
    right: 50px; 
 
    height: 100px; 
 
    border: 5px solid #F00; 
 
    background-color: rgba(255, 0, 0, 0.5); 
 
} 
 

 
.margin { 
 
    width: 100%; 
 
    height: 20px; 
 
    background-color: #444; 
 
    margin-top: 50px; 
 
    color: #FFF; 
 
} 
 

 
/* Here are some examples on how to disable margin 
 
    collapsing from within parent (.container) */ 
 
.parent-fix1 { padding-top: 1px; } 
 
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);} 
 
.parent-fix3 { overflow: auto;} 
 
.parent-fix4 { float: left;} 
 
.parent-fix5 { display: inline-block; } 
 
.parent-fix6 { position: absolute; } 
 
.parent-fix7 { display: flex; } 
 
.parent-fix8 { -webkit-margin-collapse: separate; } 
 
.parent-fix9:before { content: ' '; display: table; } 
 

 
/* Here are some examples on how to disable margin 
 
    collapsing from within children (.margin) */ 
 
.children-fix1 { float: left; } 
 
.children-fix2 { display: inline-block; }

<div class="container parent-fix1"> 
 
    <div class="margin children-fix">margin</div> 
 
    <div class="absolute"></div> 
 
</div>

這裏是jsFiddle與例如，您可以編輯

Answer 8

爲了您的您可以使用01的信息格但副作用:)

.parent { 
    display: grid 
} 

Answer 9

其實，有一個完美的作品：

顯示：彎曲;柔性方向：列;

只要你可以只支持IE10生活和高達

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: #ddd; 
 
    width: 15em; 
 
} 
 

 
.square { 
 
    margin: 15px; 
 
    height: 3em; 
 
    background: yellow; 
 
}

<div class="container"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
</div>