未浮动元素的margin-top无效问题

Question

我有一个父div #modal_share，其中包含一个浮动的div modal_big_hline和一个非浮动的div modal_big_button_container（具有clear:both）。 modal_big_button_container的CSS被创建为使其宽度在左右两侧减去父div的25像素。

问题：更改modal_big_button_container的margin-top不会导致它上下移动，而是保持在同一位置，尽管可以使用Chrome的开发人员工具看到其边距正在更改。

为什么会这样，并且我该如何解决？谢谢！ CSS

#modal_share {
    width: 565px;
    height: 400px;
    position: relative;
    background: whiteSmoke;
    padding-top: 10px;      
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 16px #222;
    -moz-box-shadow: 0px 3px 16px #222;
    box-shadow: 0px 3px 16px #222;
    display: none;  
}

.modal_big_hline {
    width: 100%;
    height: 1px;
    margin-top: 25px;
    border-top: 1px solid #CCC;
    float: left;
}

#modal_big_button_container {
    height: 14px;
    width: auto;
    margin: 10px 25px 0px 25px;
    clear: both;
}

HTML结构

<div id="#modal_share">
    <div class="modal_big_hline"></div>
    <div id="modal_big_button_container"></div>
</div>

JSFiddle: http://jsfiddle.net/5LG2w/

- Nyxynyx

Answer 1

尝试

modal_big_button_container{
    position: relative;
      top: 20px;
}

这里是示例代码 - http://jsfiddle.net/5LG2w/2/。

或者你可以将 .modal_big_hline 中的浮动属性去掉。这样，你的 margin-top 就能起作用了 - http://jsfiddle.net/5LG2w/3/。

#modal_big_button_container {
    height: 14px;
    width: auto;
    margin: 10px 25px 0px 25px;
    clear: both;
    background: red;
}

- mildog8

---

为什么 modal_big_button_container 的外边距不起作用？我们真的必须采用相对定位并定义 top 吗？ - Nyxynyx

“float” 对于边距和高度会做一些相当疯狂的事情。可能还有其他一些，但这些是我遇到的。 - mildog8

Answer 2

看起来是边距折叠。请查看以下页面：

http://reference.sitepoint.com/css/collapsingmargins

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

- techfoobar