一個簡單的CSS邊距問題

Question

我一直認爲CSS邊緣背後的基礎理論非常簡單。邊距爲10px的div會在該元素周圍創建10px的坐墊。當兩個div並排放置時，兩者的邊距均爲10px，這會導致div的間距爲20px;這兩個元素都有一個10px的邊距，這導致元素之間的距離爲20px。這似乎是正確的，而且我一直認爲這是事實。

但是，我最近發現，如果不是兩個div並排放置，而是將一個放在另一個下面，那麼兩個元素之間的距離現在只有10px。其他div發出的10px頁邊距發生了什麼變化？爲什麼並排和垂直堆疊不一致？

邊距本質上是說「不要在我的x像素內放置任何東西」。通過「任何事物」，這是否包括其他元素的利潤率？在並排的情況下，答案似乎是肯定的，保證金說「不要把任何東西，包括你自己的保證金，放在我的x像素以內」。在垂直的情況下，它似乎允許後者？

請某人能澄清，所以我可以把它放在牀上，繼續我的夜晚:)

Answer 1

它有讓他們旁邊堆到彼此時，他們inline或inline-block它改變了他們的財產做而不會將邊際合併在一起（這是正常的，但是不直觀的行爲）。當他們在默認display:block財產

http://jsfiddle.net/xeCZJ/3/

邊距崩潰。您可以使用inline-block使它們按照您的預期運行，但您必須用br或含有元素的寬度手動控制換行符。

或者您可以使用填充而不是邊距。

Answer 2

看起來像display:inline忽略所有頂部/底部邊距，display:block允許邊距摺疊，並且display:inline-block將它們加在一起以獲得大量邊距。結帳這個jsFiddle例如：http://jsfiddle.net/Z2nUN/4/

<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 

<hr /> 
<div class="allBlock"> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
</div> 

<hr /> 
<div class="allInlineBlock"> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
</div>​ 


p{ margin:10px; background:#ccc; display:inline;} 
.wideMargin{ margin:30px;} 
.narrowMargin{ 0px; } 
.allBlock p{ display:block;} 
.allInlineBlock p{ display:inline-block;}​ 

永遠不會注意到這一點。我猜，今天我學會了。

編輯：添加顯示：塊和inline-block的

Answer 3

看來你找到了自己的答案：倒塌的利潤率是CSS2.1 recommendation和CSS3 working draft的一部分。後者取決於block-progression，默認爲'tb'（上 - 下）。這將導致只有頂部/底部邊距崩潰。爲了瓦解左/右頁邊距，一個將不得不使用block-progression:lr或block-progression:rl：

• 一個框的左邊距，如果利潤率比鄰與其父盒B的左邊距崩潰B是'r1'或'lr'。
• 如果邊距相鄰且B爲'rl'或'lr'，則框A的右邊緣與其父框B的右邊緣摺疊。

可惜block-progression不在newest working draft，是不太可能通過任何瀏覽器來實現。自2007年以來，CSS3盒子模塊尚未更新，因此不清楚何時能夠得到明確的答案。