Question

这是一个难题。基本页面，一个元素：

HTML：

<div id="container"></div>

CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
#container {
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 100%;
    background-color: #666;
}

那个看起来我想要的，#container整齐地冲到顶端。但是当我添加一个嵌套元素时：

http://jsfiddle.net/PZj6t/1/

HTML：

<div id="container">
    <nav id="topnav"></nav>
</div>

CSS（新）：

#topnav {
    width: 100%;
    height: 40px;
    margin: 30px 0;
    background-color: red;
}

容器跳了下来。似乎#topnav的margin-top以某种方式传递给容器，现在页面有一个我不想要的滚动条。（我在Chrome中测试。）如何防止这种情况？

（更进一步的是，如果我将border: 1px solid white;添加到＃容器的CSS中，跳转就会消失。哪个会好的，除了还会在页面上添加两个不合需要的滚动像素。）

Answer 1

这是由于CSS的一个功能称为边缘折叠。如果父元素上没有填充或边框，则父元素及其子元素的边距会“折叠”为两者的较大值，并且基本上应用于父元素。

根据您的情况，我建议您只需在容器中添加一个额外的内包装，并在其上添加一些填充以模拟您正在寻找的边距效果：http://jsfiddle.net/PZj6t/3/

#inner div或以下的任何内容都应该按预期运行，因为边距只有在它们位于其父级边缘时才会崩溃（并且不存在填充或边框）。

Answer 2

display:inline-block;

在您的导航元素上出现将解决此问题。它与边缘折叠有关，请参阅here以获取更多详细信息。

Answer 3

Jblasco是正确的，但这是一个更简洁的解决方案：http://jsfiddle.net/PZj6t/4/

#container {
    position: relative;
    margin: -1px auto 0;
    width: 400px;
    height: 100%;
    padding-top:1px;
    background-color: #666;
}
#topnav {
    width: 100%;
    height: 40px;
    margin: 29px 0 30px;
    background-color: red;
}

Answer 4

#container {
    margin: 0 auto;
    width: 400px;
    height: 100%;
    background-color: #666;
    border:1px solid;
}

http://jsfiddle.net/PZj6t/12/

Update:

http://jsfiddle.net/PZj6t/1/
在display:inline-block;和container

上应用topnav

为什么嵌套的HTML元素会让我的CSS跳转？

4 个答案: