有人可以回答我吗，为什么当我为我的 <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>
最佳答案
这是由 margin collapse 引起的.
正常文档流
在 <div id="logo"> 的情况下没有 float ，它的上边距实际上伸出了它的包含元素的顶部，这将所有内容向下推。这种行为的原因(正如上面的文章所指出的)是这样的，如果你有一系列带有以下 CSS 的段落:
p {
margin: 1em 0;
}
它们之间只有 1em 的边距，而不是 2em(如果边距没有塌陷，这将是结果)。
float 修复
当你漂浮时<div id="logo">它将它从正常的文档流中移除，这意味着它的上边距不再与其父级的边距一起折叠。
修复
在您的情况下修复边距折叠的其他选项是为您的 <div id="header"> 添加 1px 的顶部/底部填充或边框。 .
关于HTML 边距插入其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3621183/