奇怪的div保证金问题

Question

我正在尝试将内容旋转器添加到我正在构建的网站中。旋转器工作正常。事实上，它比我希望的更好。我需要调整一些样式的东西，但这是重点。

出于某种原因，当我在它的顶部添加一个边距（margin:65px auto 0;或类似的东西时，旋转器（相对定位在我的容器/包装器div内）将我的包装器和菜单拉下来）。有任何建议吗？

这里的页面： http://technoheads.org/test/ice/index.htm

Answer 1

这听起来像collapsing margins的经典案例。

您可以通过为容器提供border-top，margin-top，padding-top或overflow以外的visible来解决此问题。 （jsFiddle）

Answer 2

你可以通过给#wrapper顶部填充而不是给#slideshow上边距来完成你想要的东西。

Answer 3

当我将元素放在内联元素中时，我遇到了很多问题。您应该能够通过执行以下操作之一来解决此问题：

• 将您遇到问题的元素设置为display: block;（通常是足够好的修复）
• 使用已建议的top-padding（如果有效的话，使用创可贴没有任何问题......）
• 将元素设置为float: left;（不是真的推荐，可能会导致一些问题，但肯定会允许您添加顶部和底部边距）

Answer 4

这个怎么样？

#menu {
  position: relative;
  width: auto;
  height: 100px;
  left: 383px;
  top: 0px;
}