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

今天我在jQuery中播放幻灯片。当我注意到一件奇怪的事情时，我设法创造了它。放置幻灯片的div

#功能

似乎以某种方式粘附到其父元素

#内容

。当我将

margin:10px auto

添加到

#feature

div时，

#content

div相对于其父元素也会降低10px

谁能告诉我我做错了什么

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

#功能的CSS

：

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

和内容的CSS：

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

---

我的朋友注意到一件有趣的事。如果将

页边距底部：30px

添加到

#菜单

中，内容中的空白10px空间已正确填充，尽管页边距问题仍未解决。

尝试添加

溢出：自动至
#内容
。这可能会有帮助

添加溢出可防止页边距塌陷

在CSS中，两个或多个框（可能是同级框，也可能不是同级框）的相邻边距可以合并形成一个边距

from
位置：relative
正是这样做的。。。使此应用的任何元素的位置变为相对于其父容器的“相对”

#feature
是
#content
的子项，因此
#feature
的位置与
#content
的位置相对。当你将10px的边距添加到#功能中时，它会从
#content
向下移动10px，这是它没有遇到的问题。它将内容相对于主体向下移动10像素你的答案似乎起到了作用：）谢谢。你能解释一下它是如何工作的吗？为什么
overflow:auto
修复了它？正如我所理解的那样，overflow:auto告诉#content将所有内部div的边距都计算为#content div内的空间。这是否回答了你的问题？你说问题的年龄无关紧要。