为什么CSS中的边距不一致？奇怪的行为

Question

我今天在jQuery中玩幻灯片。当我注意到奇怪的事情时，我设法创造了它。幻灯片放置的div #feature似乎以某种方式粘贴到其父元素#content。当我将margin: 10px auto添加到#feature div时，#content div也会相对于其父元素降低10px。

谁能告诉我这里做错了什么？

为您提供整个代码会造成混乱，但这里有一个链接：

http://dharman.eu/daftPunk/

#feature的CSS：

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

和#content的CSS：

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

我的朋友发现了一件有趣的事情。如果您将margin-bottom: 30px添加到#menu，则内容中的空10px空间会被正确填充，但保证金问题仍未解决。

Answer 1

position: relative就是这样......使得适用的任何元素的位置变为＆＃34; relative＆＃34;到其父容器。

#feature是#content的孩子，因此#feature的位置相对于#content的位置。当您将该10px边距添加到#feature时，它会从#content向下移动10px。

Answer 2

尝试添加overflow：auto;到#content。这可能有所帮助。