HTML 边距推送其他元素

发布于 2024-09-17 19:14:23 字数 984 浏览 7 评论 0原文

有人可以回答我吗，为什么当我为

设置 margin-top 时，所有其他 div 都被推下。为什么如果将 float:left 设置为我的

，一切正常。

代码：

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

顾铮苏瑾 2024-09-24 19:14:23

这是由边距崩溃引起的。

正常文档流

在

未浮动的情况下，其上边距实际上伸出其包含元素的顶部，这把一切都推倒了。这种行为的原因（正如上面的文章所指出的）是这样的，如果你有一系列具有以下 CSS 的段落：

p {
   margin: 1em 0;
}

它们之间只有 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:

p {
   margin: 1em 0;
}

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">.

回复收藏 0 原文