HTML CSS : odd behavior that I can't understand, 添加边框时多余空间消失

Question

这里是 css/hmtl 新手。我一直在搞乱 div，我遇到了一些我无法弄清楚/无法解释的奇怪行为。当它应该以 y 轴为中心时，我在“更多”链接下方获得了额外的空间。

这是代码:

#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
    border-bottom: 1px solid #ececec;  

}

但是当我把它改成这个时，多余的空间就消失了!

#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
    border-bottom: 1px solid #ececec; 
    border: 1px solid #911; 
}

没有额外边框的完整代码:http://jsfiddle.net/8q3Ca/带有额外边框的代码:http://jsfiddle.net/8q3Ca/1/任何想法发生了什么？非常感谢!

Answer 1

您在 #rec-title 上有 margin-top。这是 margin 崩溃 - http://www.w3.org/TR/CSS2/box.html#collapsing-margins尝试对父 block 使用“溢出:自动”。类似问题Child elements with margins within DIVs

http://jsfiddle.net/fliptheweb/8q3Ca/2/