保證金互相堆疊？

我很早就注意到，當兩個塊元素彼此相鄰放置時，它們的邊距彼此疊加。事情是這樣的：保證金互相堆疊？

enter image description here

兩個<div>■找margin: 1em，但是當margin1的margin-bottom碰撞margin2的margin-top，既保證金只是堆疊在彼此。看到這裏：http://jsfiddle.net/39XmC/

我所期待的是這樣的：

enter image description here

兩個<div> 5事實上給每個利潤率空間和對彼此的利潤率不疊加。

我知道這可以通過floating修復或溢出元素。我的問題：

爲什麼會發生這種情況[理論上]？不應該保證金不應堆疊？
這是瀏覽器的默認行爲？因爲我記得在一個沒有這種行爲的項目上工作。

來源

2013-11-05 deathlock

這種行爲是正常的，這就是所謂的摺疊頁邊距..

從W3C報價：

在CSS中，兩個或多個框的相鄰邊緣（可能或可能沒有兄弟姐妹）可以結合起來形成一個單一的餘量。據說這種結合的邊際將崩潰，並且由此產生的合併邊際被稱爲摺疊邊際。

在垂直方向鄰接利潤率崩潰，除了：

根元素框的邊距不塌陷。

如果具有間隙的元素的頂部和底部邊距相鄰，則其邊緣會與下一個同胞的相鄰邊緣一起摺疊，但導致的邊距不會與父塊的底部邊距一起摺疊。

來源

2013-11-05 05:21:38

謝謝。基本上我肯定錯過了這個。 – deathlock

@deathlock歡迎:) –

它是CSS的一個屬性。請參考this one

當你有

h1 { 
    margin: 0; 
    background: #cff; 
} 
div { 
    margin: 40px 0 25px 0; 
    background: #cfc; 
} 
p { 
    margin: 20px 0 0 0; 
    background: #cf9; 
}

和HTML作爲

<h1>Heading Content</h1> 
<div> 
    <p>Paragraph content</p> 
</div>

段落的保證金頂部將是40像素，而不是60像素。

來源

2013-11-05 05:21:18

對於爲什麼出現這種情況？

邊距不是關於尺寸的元素;他們只是關於呼吸的空間。（您可能會注意到，即使box-sizing也不會讓您將邊距視爲元素大小的一部分，因爲它不是）

1em的邊距意味着「我需要至少1em的空間，以免看起來擁擠「。如果你有兩個彼此相鄰的元素，都表示他們需要至少1em的空間，那麼將它們間隔1em就能滿足這兩個條件，同時浪費最小的空間量。如果你牢記這一點，摺疊邊界的規則會更有意義。

來源

2013-11-05 07:50:08 Eevee

事實上，這就是爲什麼即使像'box-sizing：margin-box'屬性也沒有意義的東西[如果有人提出]（http://stackoverflow.com/問題/ 10808413/CSS3盒施膠餘裕箱爲什麼 - 不是）。 – BoltClock

在此之前，我一直認爲保證金是元素本身的一部分。由於此行爲（邊界崩潰）在父項溢出或元素本身浮動時發生更改。爲什麼？ – deathlock

因爲漂浮物很奇怪？ :)我認爲這是因爲浮動元素的邊緣往往最終會成爲另一個元素，所以崩潰邊緣的想法有點兒離開了窗口 – Eevee

保證金互相堆疊？

回答

相關問題