顶部保证金不会像我期望的那样行事。为什么？

因此，我一直在做一段时间的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; }

的问题是..我把边距：150像素的 “mainNav” 分区和..而不是从 “头” 的div倒推150像素。 ..整个页面被移动。所以“主”div实际被推下150px ..我不明白为什么！如果我使用padding-top：150px为“mainNav”div，它实际上使用“header”div从下推。

我的问题有意义吗？

我确信有某种规则我只是不知道。提前感谢！

来源

2009-08-21 Roeland

您正在处理折叠边距。

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

总之，#main和的#header的上边距是旁边（邻接）#mainNav的余量。这种垂直相邻的边缘通常会塌陷;它们形成一个综合利润。将它与border-collapse: collapsed的td边框相比较 - 这些边框也只是一个边框，宽度等于最厚的边框。

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

例如，您可以设置#header { padding-top:1px; }，或者您应用规范描述的防止边界邻接（如浮动元素）的情况之一。请注意，浮动和其他情况会阻止边距崩溃以简化规格：您正在进入复杂领域，获得的利益微乎其微。

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

来源

2009-08-21 13:39:37

很酷。这解释了它背后的逻辑。基本上如果我可以防止崩溃我的问题的利润率解决。添加“溢出：隐藏”我认为导致div是'特殊'反过来防止崩溃（就像边框或填充等会做）。我对吗？ – Roeland 2009-08-21 13:59:40

是的，加入'#header {overflow：hidden; }'可以正常工作，并且比我设置一个小顶部填充的想法更简单。好主意！ – 2009-08-21 14:14:34

-1

尝试将您的主要div位置置于位置：绝对;这将工作，我认为。我不知道原因

来源

2009-08-21 13:32:41 Gregoire

这与我上面关于'overflow：hidden'的评论相同。使用“position：absolute”也会将该元素建立为新的“流程根”，但是“position：absolute”对于此特定问题的解决方案几乎不是那么好，因为它可能会对布局造成更多意想不到的后果。 – Wick 2009-09-25 13:20:37

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

来源

2009-08-21 13:34:24

其实，加入'border：1px solid red'将会防止边距崩溃;-)。这将使调试复杂...你想要的是'outline：1px点缀红色';' - 这将只是叠加大纲而不修改布局（适用于除IE7或更旧的所有常见浏览器） – 2009-08-21 13:59:05

这是真的很好知道。边框通常会弄乱布局，因为我通常会将东西像素完美地浮动。所以1像素太多会抛出布局。 – Roeland 2009-08-21 14:08:23

@Roeland：调试CSS布局的方法有很多。你也可以使用不同的背景颜色或图像或其他。只有态度才会有帮助:) – 2009-08-21 14:13:28

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

来源

2009-08-21 13:49:56 Roeland

'overflow：hidden'有效，因为这是盒子模型规范的预期行为的一部分。请参见http://www.w3.org/TR/css3-box/#collapsing-margins 下面的“示例X”中显示的规则集...将溢出属性设置为除“可见”以外的任何内容都会建立元素作为“流程根”，它实质上意味着它建立了自己的格式化上下文。这个技巧（不是破解！）对于包含浮动和防止崩溃边距非常方便。 – Wick 2009-09-25 13:17:45

顶部保证金不会像我期望的那样行事。为什么？

回答

相关问题