Question

有人可以回答我，为什么当我为我的<div id="logo">设置一个保证金顶部时，其他所有div都被推倒了。为什么如果设置浮动：离开我的<div id="logo">，一切正常。

代码：

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>Olá Mundo!</title>
    <style>
      /* CSS RESET HERE */ ( http://html5doctor.com/html-5-reset-stylesheet/ )
      body { margin:0; }
      #container { width:1000px; min-height:100%; height:auto; margin:0 auto; }
      #header { width:100%; height:160px; background-color:#FF0; }
      #logo { width:150px; height:150px; margin:10px 0 0 10px; background-color:#F0F; }
    </style>
  </head>
  <body>

    <div id="container">
      <div id="header">

        <div id="logo">
          <h1>Minha logo!</h1>
          <h2>meu slogan ...</h2>
        </div>

      </div>

  </body>  
</html>

Answer 1

由margin collapse引起。

普通文件流程

在<div id="logo">未浮动的情况下，其上边距实际上是从其包含元素的顶部伸出，这会将所有内容向下推。这种行为的原因（正如上面的文章指出的那样）是这样的，如果你有一系列带有以下CSS的段落：

p {
   margin: 1em 0;
}

它们之间只有1em的边距，而不是2em（如果边距没有崩溃，那将是结果）。

浮动修复

当您浮动<div id="logo">时，它会将其从正常文档流中取出，这意味着其上边距不再与其父级边距折叠。

<强>修复

在您的情况下修复边距折叠的其他选项是向您的<div id="header">添加1px的顶部/底部填充或边框。

Answer 2

你的h1有一个默认的边距（在我的电脑上的safari上是.67em）。这就是导致一切被压低的原因。

尝试：

h1{margin:0;}

将解决所有问题。

浮动时它起作用的原因是浮动它会使徽标元素脱离正常流量，因此它不会影响其父项的定位。

另外，我总是使用重置css来避免这种情况。 YUI's reset效果很好。

HTML边距推送其他元素

2 个答案: