我有以下代碼在這裏保證金不添加元素?
<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像素的空間。
我有以下代碼在這裏保證金不添加元素?
<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像素的空間。
這就是所謂的崩潰邊緣。下面是凡人一個很好的文章:
http://reference.sitepoint.com/css/collapsingmargins
而這裏的規格爲剩下的你:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
簡單來說,這個定義表明,當垂直邊距兩個元素相互碰觸,只有邊距值最大的元素的邊距將被兌現,而具有較小邊距值的元素的邊距將被歸零。
+1 - 偉大的答案! – mrtsherman 2011-12-14 18:11:26
血腥地獄,謝謝,這種鈍的行爲是純粹的邪惡,偷走了我生命中的一天 – valexa 2012-05-22 08:07:42
我不明白那是行不通的,但你只能得到30px的餘量。更大的優先權優先。您還可以嘗試將它們包裝在<div>
元素中,併爲其中一個分配50px的餘量。
<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-15 08:51:13
如果您使用類似Chrome開發人員工具的東西,則可以在元素上單擊鼠標右鍵並獲取元素的框模型。請參閱這些截圖以供參考。我認爲一旦你看到視覺效果,答案就會變得清晰。問題是邊際崩潰。
我相信你沒有得到你的預期結果的原因是因爲你既然已經給了h1
元素30PX保證金底,該p
元素已經有一個等於30px的餘量,所以告訴它有一個20px的餘量頂部什麼也不做。嘗試給p
元素設置一個40px的邊距頂部,並觀察它們之間的邊距增加10px。
我的建議是,你可以不加利潤率h1
或p
標籤,因爲這些是所謂的inline Elements
和CSS屬性display
它們的默認值是inline
。所以你必須改變這display:block;
,那麼你應該能夠添加邊距和填充。
它完美顯示在所有流行的網絡引擎。你探索哪一個? – heximal 2011-12-14 18:10:02