Question

当我在一个小项目上工作时，我遇到了一个删除，我不能为我的生活弄清楚。为什么 #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 { 高度：100像素; } #windowBody { 位置：绝对的; 顶部：0; 宽度：100％; 底部：0; }

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

Answer 1

稍微安全的方法也是添加

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

这对你有用吗？

Answer 2

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

首先，＃windowow不会被移动。如果你在它上拍一个边框，你会看到它不会移动而不管其他变化。它实际上是#appHead移动。

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

您可以在此处使用它：http://jsfiddle.net/tsuujin/QcpgC/

Answer 3

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

{
 border: dotted 1px blue;
}

Answer 4

当您申请

时，保证金将停止推送所有内容

   float: left;

（或右）到#appHead里面的div。

Answer 5

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

Answer 6

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

position:absolute;

在其他人（有边缘顶部）内的Div正在推动父母失望

6 个答案: