其他人内部的 Div（边缘顶部）正在推动父母答案

【问题标题】：Div inside others (with margin-top) is pushing parents down其他人内部的 Div（边缘顶部）正在推动父母
【发布时间】：2012-03-21 12:09:09
【问题描述】：

当我在做一个小项目时，我遇到了一个我一生都无法弄清楚的问题。为什么 #appHead 中的 div 会导致 #windowBody 下移？有什么想法吗？

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Atlas - Valencia College</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css" type="text/css">
        <!--<script type="text/javascript" src="scripts.js"></script-->
    </head>
    <body>
        <div id="bgGrad"></div>
        <div id="windowTop">
        </div>
        <div id="windowBody">
            <div id="appEnv">
                <div id="appHead">
                    <div style="margin-top:20px;height:20px;"></div>
                </div>
            </div>
        </div>
        <div id="windowFoot">
        </div>
    </body>
</html>

css

身体{ 背景：url（“lol.png”）；边距：0； } #appEnv{ 宽度：100%；高度：100%；顶部：0；底部：0；左：0；对：0；轮廓：点缀 1px 蓝色； } #appHead{ 高度：100px； } #windowBody{ 位置：绝对；顶部：0；宽度：100%；底部：0； }

即使我删除了所有的绝对定位，情况仍然如此，但是我可能做错了。

【问题讨论】：

这叫做折叠边距，有几种解决方法：reference.sitepoint.com/css/collapsingmargins
詹姆斯，你应该把它作为一个答案，这就是我正在寻找的，并且会让它被接受。

标签： html css

【解决方案1】：

好的，我玩了一下，这就是我发现的：

首先，#windowBody 没有被向下移动。如果你在它上面加上一个边框，你会发现不管其他变化它都不会移动。实际上是#appHead 在移动。

在您的代码中，您在 appHead div 中没有任何内容，而是将另一个 div 放入其中，其中包含一个 margin-top。因为#appHead 中没有内容，它基本上被合并到它的子 div 中并获得它的 margin-top 属性，将它向下移动 20px（您可以将 20px 更改为另一个数字以查看更改）。向#appHead 添加一个单词（但不在它的子 div 中）将完全解决问题。

你可以在这里玩它：http://jsfiddle.net/tsuujin/QcpgC/

【讨论】：

如果您在 appHead 上放置透明边框，它也可以工作，即使它看起来是一个丑陋的解决方案。但是非常感谢这个！当我遇到这个时正在挠头！

【解决方案2】：

还有一个稍微安全一点的方法是添加

#appHead:after {
 content:"";
 display:block;
 clear:both;
 font-size:0;
 line-height:0;
}

这对你有用吗？

【讨论】：

这是我提供的解决方案的一个很好的替代方案。它可能会导致背景格式出现一些问题，但无论如何您可能都不需要。
您可能还会遇到一些旧版浏览器的问题：之后，请尝试并在您的目标设备上进行测试

【解决方案3】：

假设我了解您的最终目标，您可以考虑在您的 CSS 中尝试添加到 #appEnv

position:absolute;

【讨论】：

这确实有效，但前提是您不希望 #appEnv 正确定位在其父 div 内（绝对定位是......绝对）。

【解决方案4】：

当不使用重置样式表时，我总是发现上边距在接近 dom 顶部时会破坏页面流。除了其他答案，您还可以将 overflow:hidden 添加到 #appHead 样式

【讨论】：

【解决方案5】：

当您申请时，保证金将停止推高一切

   float: left;

（或右）到#appHead 中的 div。

【讨论】：

这也可以，但你需要小心只浮动你真正想要浮动的项目。当我说使用浮点数会产生完全不同的挫败感时，请相信我。
使用浮动会中断文档流，这将使后续元素潜入浮动元素后面。但是一旦你知道你可以在任何时候用 clear 继续文档流。起初的概念令人困惑，但绝对值得。

【解决方案6】：

在您的#appEnv 元素上使用border 代替outline。

{
 border: dotted 1px blue;
}

【讨论】：

确实如此。不知道为什么有轮廓而不是边框..但它并不能解决您进行此更改的问题。
@Nathan Cox，没错，我显然误解了最初提出的问题:)
大纲用于调试，边框改变元素尺寸