1

我有两个 div，一个嵌套在另一个中，即#messagesdiv 在#mainContentdiv 内。#messagesdiv 应该距离其父级的顶部 0px 。一切都很好，直到我在unordered list里面放了一个，然后它把整个 div 从整个#messagesdiv 向下推了几个像素。

如果我穿上元素margin-top:0px;，ul一切都很好，但我希望 ulmargin-top:10px;来自它的#messages父级。如果我再把margin-top:10px;它推#messages10px 从#mainContent.

有人可以解释为什么会发生这种情况，有人可以为此提供一个干净的解决方案吗？

谢谢，是这样的jsfiddle：

http://jsfiddle.net/wtKuP/4/

4

4 回答 4

6

“有人可以解释为什么会这样吗，有人可以为此提供一个干净的解决方案吗？ ”

块级元素的上边距及其第一个流入块级子元素将始终折叠。有很多方法可以避免这种情况（阅读上面的链接以获取完整列表） - 一种是添加overflow: hidden到父级，<ul>因为这会创建一个新的块格式化上下文并防止标准边距折叠行为。

http://jsfiddle.net/wtKuP/22/

从 2.1 规范，第 8.3.1 节：

建立新块格式化上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不会与其流入的子项一起折叠。

于 2013-05-31T11:56:21.457 回答
0

放

margin:0;
padding:0;

在两者上divs。然后ul消息 div 将有 10px 的边距，但消息 div 将没有maincontent.

于 2013-05-31T11:48:44.830 回答
0

添加 ul:{margin:0;}。更好地使用 eric myers reset.css 这将消除浏览器不一致

于 2013-05-31T12:12:22.940 回答
0

尝试这个

JSFiddle 已根据您的要求进行了更新

<div id="mainContent">
<div id="messages">
<ul>
<li>Remove the UL and LI, and the #messages div will be 0px from the top of the parent div #mainContent. Why?</li>
</ul>
</div>
</div>

接着...

div#mainContent {
    border:1px solid black;
    position:absolute;
    width:500px;
    height:600px;
    margin-top:50px;
    margin-left:-250px;
    left:50%;
}
#mainContent > #messages {
    margin: 0;
    width:499px;
    height:525px;
    background-color:red;
}

#messages ul { 
    display: inline-block;
    margin-top: 10px;
}
于 2013-05-31T12:13:06.427 回答