保證金不添加元素？

我有以下代碼在這裏保證金不添加元素？

<h1>Test</h1> 
<p>Another test</p> 
h1 
{ 
border:2px solid red; 
margin-bottom:30px; 
} 
p 
{ 
border:2px solid red; 
margin-top:20px; 
}

現場小提琴http://tinkerbin.com/dnhA713P

我想有h1和p但它沒有得到50px的空間之間50像素的空間。

來源

2011-12-14 Human Love

它完美顯示在所有流行的網絡引擎。你探索哪一個？ – heximal 2011-12-14 18:10:02

這就是所謂的崩潰邊緣。下面是凡人一個很好的文章：

http://reference.sitepoint.com/css/collapsingmargins

而這裏的規格爲剩下的你：

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

簡單來說，這個定義表明，當垂直邊距兩個元素相互碰觸，只有邊距值最大的元素的邊距將被兌現，而具有較小邊距值的元素的邊距將被歸零。

來源

2011-12-14 18:08:15 Filip

+1 - 偉大的答案！ – mrtsherman 2011-12-14 18:11:26

血腥地獄，謝謝，這種鈍的行爲是純粹的邪惡，偷走了我生命中的一天 – valexa 2012-05-22 08:07:42

我不明白那是行不通的，但你只能得到30px的餘量。更大的優先權優先。您還可以嘗試將它們包裝在<div>元素中，併爲其中一個分配50px的餘量。

http://jsfiddle.net/LuDvL/

<div id="header"> 
    <h1>Test</h1> 
</div> 

<div id="content"> 
    <p>Another test</p> 
</div> 

/* either one of these should work */ 
#header { margin-bottom: 50px; } 
#content { margin-top: 50px; }

來源

2011-12-14 18:06:02 Hristo

感謝您的幫助 – 2011-12-15 08:51:13

如果您使用類似Chrome開發人員工具的東西，則可以在元素上單擊鼠標右鍵並獲取元素的框模型。請參閱這些截圖以供參考。我認爲一旦你看到視覺效果，答案就會變得清晰。問題是邊際崩潰。

enter image description here

來源

2011-12-14 18:09:01 mrtsherman

我相信你沒有得到你的預期結果的原因是因爲你既然已經給了h1元素30PX保證金底，該p元素已經有一個等於30px的餘量，所以告訴它有一個20px的餘量頂部什麼也不做。嘗試給p元素設置一個40px的邊距頂部，並觀察它們之間的邊距增加10px。

來源

2011-12-14 18:10:22

我的建議是，你可以不加利潤率h1或p標籤，因爲這些是所謂的inline Elements和CSS屬性display它們的默認值是inline。所以你必須改變這display:block;，那麼你應該能夠添加邊距和填充。

來源

2011-12-14 19:18:01

保證金不添加元素？

回答

相關問題