Question

我觉得这一定是我做傻事的问题，但我无法理解。 Here's a demo page showing my problem.页面来源：

<html>
<head>
    <title>demo</title>
    <style type='text/css'>
        body{
            margin: 0px;
            padding: 0px;
        }
        #container{
            height: 100%;
            background-color: black;
        }
        #logo{
            margin: 25px auto auto auto;
            width: 360px;
            height: 45px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='logo'>
            <p>logotext.</p>
        </div>
    </div>
</body>
</html>

因此，您调整保证金的最高值越多，页面越远，＃logo和#container都会被拖动。 #container应保持不变，而#logo应该向下移动。

Answer 1

这是由边距折叠造成的。如果两个元素具有触摸边距，则边距合并。这个here有一个很好的解释。转到名为Collapsing Margins Between Parent and Child Elements的部分。

以下是三种不同的解决方案。

一种是将overflow: auto添加到容器中。这改变了BCF（块格式化上下文）。更详细地描述了该技术here。

#container {
    height: 100%;
    background-color: black;
    /* Add oveflow auto to container */
    overflow: auto;
}

http://jsfiddle.net/bzVgV/20/

第二种是在容器上使用填充而不是徽标上的边距。这会使边距超出等式。

#container {
    height: 100%;
    background-color: black;
    /* Use padding on container instead of margin on logo */
    padding-top: 30px;
}

http://jsfiddle.net/bzVgV/18/

最终解决方案是使边距不再触及。您可以通过向父级添加1px填充来完成此操作。

#container {
    height: 100%;
    background-color: black;
    /* Now margins of container and logo won't touch */
    padding-top: 1px;
}

http://jsfiddle.net/bzVgV/21/

调整容器div内部div的margin-top将内部div和容器div从主体向下推

1 个答案: