HTML边距推送其他元素_html-js-css

概述有人可以回答我,为什么当我设置一个margin-top到我的< div id =“logo”>时,所有其他div都会被推下来.为什么如果设置浮动：离开我的< div id =“logo”>,一切正常. 码： <!DOCTYPE html><html lang="pt-br"> <head> <title>Olá Mundo!</title> <style> /* 有人可以回答我,为什么当我设置一个margin-top到我的< 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>

解决方法它是由 margin collapse引起的.

正常文件流程

在< div ID =“logo”>的情况下没有漂浮,它的上边缘实际上是从其包含元素的顶部伸出,这将一切都推下来.这种行为的原因(正如上面的文章指出的那样)是这样的,如果你有一系列带有以下CSS的段落：