HTML边距推送其他元素答案

【问题标题】：HTML margin push other elementsHTML边距推送其他元素
【发布时间】：2013-10-17 04:14:49
【问题描述】：

有人可以回答我吗，为什么当我为我的<div id="logo"> 设置一个边距顶部时，所有其他 div 都被推下。为什么如果设置 float:left 到我的<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>

【问题讨论】：

@user437246 由于您使用的是html标签它们被解析为HTML，我们看不到它们，请从中解开它们。
#logo 中的其他元素是否浮动？如果是，那么#logo 会崩溃，除非你浮动它。

标签： html css margin

【解决方案1】：

这是由margin collapse 引起的。

正常文档流

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

p {
   margin: 1em 0;
}

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

浮动修复

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

修复

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

【讨论】：

Thaaaaanks 的答案！我正在阅读这篇文章，非常喜欢：D

【解决方案2】：

您的 h1 上有一个默认边距（在我的计算机上的 safari 上是 .67em）。这就是导致一切都被推倒的原因。

尝试：

h1{margin:0;}

将解决所有问题。

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

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

【讨论】：

哦，对不起。我正在使用 Richard Clark (html5doctor.com/html-5-reset-stylesheet) 创建的 css 设置/重置。感谢您的回答！