Div内嵌在其他元素中（具有margin-top）会将父元素向下推。

Question

Div内嵌在其他元素中（具有margin-top）会将父元素向下推。

3

当我在做一个小项目时，遇到了一个难题，让我想不通。为什么#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

body{ 背景:url("lol.png"); 边距:0; } #appEnv{ 宽度:100%; 高度:100%; 顶部:0; 底部:0; 左侧:0; 右侧:0; 外轮廓:dotted 1px blue; } #appHead{ 高度:100px; } #windowBody{ 定位:绝对; 顶部:0; 宽度:100%; 底部:0; }

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

- TERMtm

3

它被称为折叠边距，有几种解决方法：http://reference.sitepoint.com/css/collapsingmargins - James Montagne

詹姆斯，你应该把它做成一个答案，那正是我正在寻找的，并且会把它标记为被接受。 - TERMtm

6个回答

2

好的，我稍微尝试了一下，这是我找到的结果：

首先，#windowBody没有下移。如果给它加上边框，你会发现无论做出什么其他更改，它都不会动。实际上，移动的是#appHead。

在您的代码中，appHead div里面没有内容，而是将另一个div放进去，并包含一个margin-top。因为#appHead没有内容，所以它基本上被合并到了它的子div中，并获得了它的margin-top属性，将它下移了20像素（你可以把20像素改成其他数字来看到变化）。只要在#appHead中添加一个单词（但不在其子div中），就可以完全解决这个问题。

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

- Nathan Cox

如果您在appHead上放置一个透明边框，它也可以起作用，尽管看起来有些丑陋。但真的非常感谢您！当我遇到这个问题时，我一直在琢磨！ - stinaq

0

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

{
 border: dotted 1px blue;
}

- Jesse

1

足够正确。不确定为什么使用了轮廓而不是边框，但这并不能解决问题，当你进行这个更改时。 - Nathan Cox

@Nathan Cox，确实如此，我显然最初误解了所提出的问题 :) - Jesse

轮廓用于调试，边框会改变元素的尺寸。 - TERMtm

0

当你应用时，边距将停止推动所有内容向上

   float: left;

将内容返回到#appHead内部的div（或右侧）。

- Kisaro

这也可以工作，但你需要小心，只浮动你真正想要浮动的项目。相信我，使用浮动可能会产生完全不同的挫折感。 - Nathan Cox

使用浮动会打断文档流，导致后续元素悄悄地溜到浮动元素的背后。但是一旦你知道了这一点，你可以随时使用clear来继续文档流。这个概念起初可能有些令人困惑，但绝对值得掌握。 - Kisaro

0

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

- locrizak

0

假设我理解你的最终目标，你可以在CSS中尝试添加到#appEnv

position:absolute;

- ToddBFisher

这种方法是可行的，但是它只适用于您不需要将 #appEnv 定位到其父 div 中（绝对定位是绝对的）。 - Nathan Cox

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MyStream · Accepted Answer

稍微更安全的方法是添加：

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

这对您有用吗？