爲什麼CSS中的邊距不一致？奇怪的行爲

我今天在玩jQuery幻燈片。當我注意到奇怪的事情時，我設法創建了它。其中放置幻燈片放映的div #feature似乎以某種方式粘貼到其母元素#content。當我將margin: 10px auto添加到#feature div時，#content div也相對於其父元素降低了10px。爲什麼CSS中的邊距不一致？奇怪的行爲

誰能告訴我我在這裏做錯了什麼？

爲您提供完整的代碼將創建一個爛攤子，但這裏有一個鏈接：

http://dharman.eu/daftPunk/

CSS的#feature：

#feature { 
    width:940px; 
    margin: 10px auto; 
    position: relative; 
    height:500px; 
    overflow: hidden; 
    clear: both; 
    box-shadow: 0px 0px 5px 2px #000; 
}

和CSS #content：

#content{ 
    min-height:800px; 
    background-color: #fff; 
}

我的朋友noti吸引了一件有趣的事情。如果您將margin-bottom: 30px添加到#menu內容中的空白10px空間被正確填充，但邊距問題仍未解決。

來源

2012-11-30 Dharman

嘗試添加溢出：auto;到#content。它可能有幫助。

來源

2012-11-30 14:16:28

你的答案似乎在訣竅:)謝謝。你能解釋一下嗎？它是如何工作的，爲什麼'overflow：auto'修復它？ – Dharman

正如我可以理解的溢出：自動告訴＃內容計數內部div的所有邊距作爲＃內容div內的空間。 –

position: relative這樣做......使任何適用於它的位置的元素與其父容器「相對」。

#feature是#content一個孩子，所以#feature的位置成爲相對於#content的位置。當您將10px的邊距添加到#feature時，它會從#content下移10px。

來源

2012-11-30 14:16:54

這是它沒有的問題。它將內容向下移動10px相對於＃body – Dharman

查看摺疊邊距 – user1721135

爲什麼CSS中的邊距不一致？奇怪的行爲

回答

相關問題