Question

所以我一直在做html一段时间..但是当我使用边距时，我一直在遇到问题。这使我通常只使用填充。

无论如何，让我举一个我目前正在研究的例子。

http://vasoshield.xcsit.com/index.html

主要结构：

<div id="main">
   <div id="header">
       <div id="mainNav">
            main navigation...
       </div>
   </div>
   <div id="content">
        page content...
   </div>
</div>



#main { 
    margin: 0 auto;
    width: 745px;
    padding-left: 175px;
    padding-right: 50px;
    background: url(../images/white_bg.jpg) no-repeat top left;
    position: relative;
}

#header {   
    height: 210px; 
}
#mainNav { margin-top: 175px;  }

问题是..我把margin-top：150px放在“mainNav”div上...而不是从“header”div下推150px ..整个页面都向下移动。所以“主”div实际上被推下150px ..我不明白为什么！如果我使用padding-top：150px用于“mainNav”div，它实际上使用“header”div来向下推。

我的问题有意义吗？

我确信有一些我不知道的规则。提前谢谢！

Answer 1

您正在处理折叠边距。

请参阅：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

简而言之，＃main和#header的上边距位于（邻接）#mainNav的边缘。这种垂直相邻的边缘通常会坍塌;它们形成一个组合边际。将此与td边界与border-collapse: collapsed进行比较 - 这些也只是一个边框，宽度等于最粗的边框。

只有垂直边距会崩溃，并且只有在它们相邻且它们不是特殊时它们才会崩溃。有关详细信息，请参阅规范，但绝对定位，浮动和其他一些事情会阻止边距崩溃。

例如，您可以设置#header { padding-top:1px; }，或者应用其中一个规范描述的情况，这些情况会阻止边框相邻（例如浮动元素）。请注意浮动和其他情况会阻止边距折叠以简化规范：您进入复杂的区域，收益甚微。

使用填充而不是边距（或应用任何类型的中间间距，如我之前描述的1px填充）的后备选项是更好的选择;它们对布局的其余部分的影响相当小，而一旦页面变得复杂，引入浮动和/或绝对定位会导致奇怪的交互（特别是一旦开始考虑打印场景）。

Answer 2

嗯..简单地添加溢出：隐藏到“主”容器的工作..不要问我为什么！

Answer 3

由于header div之前的mainNav div中没有内容，因此边距是浏览器需要考虑的第一件事，因此看起来好像整个页面都被转移了下。我建议为所有div添加1px solid red边框，这样你就可以看到哪一个去了哪里。

Answer 4

尝试将你的主要div位置放在适当的位置：绝对;我认为它会起作用。我不知道原因

最高保证金不像我期望的那样......为什么？

4 个答案: