CSS邊緣怪異 - 請幫我理解

當在子元素（h2）上使用margin時，爲什麼會給父級（#box）留下餘量呢？如果我將邊距更改爲填充，則按預期工作。做了些什麼改變或我錯過了什麼？這裏是我的示例代碼CSS邊緣怪異 - 請幫我理解

<html> 
<head> 
<style> 
#box{ 
border-radius:10px; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
height:200px; 
width:500px; 
background:red; 
box-shadow: 15px 15px 12px grey; 
-moz-box-shadow: 15px 15px 12px grey; 
-webkit-box-shadow: 15px 15px 12px grey; 
text-align:center; 
margin-top:0; 
} 
#box h2{ 
color:#fff; 
text-shadow: 2px 2px 2px #000; 
margin-top:75px;/*making this padding gives the effect I thought I could achieve with margin*/ 
height:50px; 
width:200px; 
} 
</style> 
</head> 

<body> 
<div id="box"> 
<h2>Fun with CSS3</h2> 
</div> 
</body> 
</html>

還是否有人或每個人都可以分享他們的保證金怪癖經驗。 THx

來源

2009-11-05 chris

您使用DOCTYPE還是你只是從你的例子忽略它？省略了 – 2009-11-05 20:06:50

。對這個例子有一個沒有什麼不同。 – chris 2009-11-05 22:42:11

對於那些不知道或不遵守問題的人。將1px的填充頂部添加到#box可讓h2上的margin-top與填充工作相同。 – chris 2009-11-05 22:43:04

這是因爲collapsing margins。我討厭這個「功能」，但這就是渲染「問題」的原因。從規範的摘錄（重點是我的）：

如果一個盒子的頂部和底部邊距相鄰的，那麼有可能的利潤率將通過崩潰它。在這種情況下，元素的位置取決於其與摺疊的邊緣的其他元素的關係。

如果元素的利潤率倒塌與其父頂級保證金，盒子的上邊框邊沿被定義爲相同父母的。

下面是關於這一主題的幾篇文章：

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

http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php

來源

2009-11-05 20:02:02

謝謝，這解釋了我通過的很多問題。 :) – chris 2009-11-05 20:20:32

我的猜測是你誤解了盒子模型。邊距是外部的空間，即圍繞小部件，而填充是內部的空間，即小部件的外邊界與其內容之間的空間。

你可能想看看這個圖表：http://www.w3.org/TR/CSS2/box.html的框模型供參考。

來源

2009-11-05 19:51:41

在提供的示例中，h2是孩子或#box。 h2應該獨立於#box，因此有自己的邊距與#box分開。 – chris 2009-11-05 20:00:50

-2

我認爲它工作正常。填充就是這樣做的：填充應用的元素。保證金將要素彼此分開。所以保證金的運作是應該的。 h2標籤的位置應該是它的位置。給它一個邊際將推動它遠離根元素，在這種情況下，它是身體。爲了讓它在父元素（#box div）中移動，您必須將其放置在#box元素的相對位置，或者爲其填充（僅使用一種方法，但不是最佳方式）。

來源

2009-11-05 19:56:46 tahdhaze09

你是說它相對於#box div的位置？ h2在#box div內。不應該讓它的根元素成爲#box嗎？ – chris 2009-11-05 20:09:22

CSS邊緣怪異 - 請幫我理解

回答

相關問題