Question

我有两个div，一个嵌套在另一个中，即#messages div位于#mainContent div内。 #messages div应该是其父级顶部的0px。一切都很好，直到我在其中加unordered list，然后它将整个div从整个#messages div向下推几个像素。

如果我将margin-top:0px;放在ul元素上，一切都很好，但我希望ul来自margin-top:10px;父级#messages。如果我放margin-top:10px;它再次从#messages推送#mainContent 10px。

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

谢谢，jsfiddle是：

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

Answer 1

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

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

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

从2.1规范，第8.3.1节：

建立新的块格式化上下文的元素的边距（例如浮点数和'溢出'而不是'可见'的元素）不会因其流入的子节点而崩溃。

Answer 2

放

margin:0;
padding:0;

两个divs上的

。然后ul将从消息div获得10px的保证金，但消息div将没有maincontent的保证金。

Answer 3

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

Answer 4

试试这个

JSFiddle updated with what you were asking for

<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;
}

无序列表推送父元素

4 个答案: