程序员经验分享-hwhale

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

2024-04-28

我觉得这一定是我做了一些愚蠢的事情的问题，但我无法弄清楚。这是显示我的问题的演示页面。 http://boxofbaskets.com/html/demo.html页面来源：

<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 应在页面下移。


这是由边距塌陷引起的。如果两个元素的边距相接触，则边距会合并。对此有一个很好的解释here http://reference.sitepoint.com/css/collapsingmargins。转到名为的部分Collapsing Margins Between Parent and Child Elements.

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

一是添加overflow: auto到容器。这会更改 BCF（块格式化上下文）。该技术有更详细的描述here http://colinaarts.com/articles/the-magic-of-overflow-hidden/.

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

http://jsfiddle.net/bzVgV/20/ 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/ 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/ http://jsfiddle.net/bzVgV/21/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

margin

调整容器 div 内部 div 的 margin-top 会将内部 div 和容器 div 从 body 向下推 的相关文章

随机推荐

热门标签