HTML 边距推送其他元素
有人可以回答我吗，为什么当我为
代码：
<!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>
could someone answer me, WHY when I set a margin-top to my <div id="logo">, all the others divs are pushed down. And why if a set float:left to my <div id="logo">, everything works fine.
Code:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是由边距崩溃引起的。
正常文档流
在
未浮动的情况下，其上边距实际上伸出其包含元素的顶部，这把一切都推倒了。这种行为的原因（正如上面的文章所指出的）是这样的，如果你有一系列具有以下 CSS 的段落：它们之间只有 1em 的边距，而不是 2em（如果边距没有设置，这将是结果）不会崩溃）。
浮动修复
当您浮动
时，它会脱离正常文档流，这意味着它的上边距不再与其父级的边距折叠在一起利润。修复
在您的情况下，修复边距折叠的其他选项是向
添加 1px 的顶部/底部填充或边框。It's caused by margin collapse.
Normal Document Flow
In the case where
<div id="logo">is not floated, its top margin is actually sticking out of the top of its containing element, which pushes everything down. The reason for this behavior (as the article above points out) is so that if you have a series of paragraphs with the following CSS:They will only have 1em of margin between them, instead of 2em (which would be the result if margins didn't collapse).
Float Fix
When you float
<div id="logo">it takes it out of the normal document flow, which means its top margin no longer collapses with its parent's margin.Fixes
Other options to fix margin collapse in your case would be to add 1px of top/bottom padding or a border to your
<div id="header">.你的 h1 有一个默认边距（在我电脑上的 safari 上，它是 0.67em）。这就是导致一切都被推倒的原因。
尝试：
会解决所有问题。
当您浮动时它起作用的原因是浮动会将徽标元素带出正常流程，因此它不会影响其父元素的定位。
另外，我总是使用重置 CSS 来避免这种情况。 YUI 的重置效果很好。
Your h1 has a default margin on them (on safari on my computer it's .67em). This is what's causing everything to be pushed down.
try:
Will fix everything.
The reason it works when you float is that floating it takes the logo element out of the normal flow, so it doesn't affect its parents' positioning.
Also, I ALWAYS use a reset css to avoid this. YUI's reset works very well.