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

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填充)的后备选项是更好的选择; 它们对布局的其余部分影响相当小,而引入浮动和/或绝对定位会在页面变得复杂时引起奇怪的交互(特别是一旦开始考虑打印场景).