HTML CSS：我无法理解的奇怪行为，添加边框时的额外空间消失者

Question

css/html新手在这里。我一直在摆弄潜水器，我得到了一些奇怪的行为，我无法理解/解释。我在"more"链接下面得到了额外的空间，而它应该位于y轴的中心。

这是代码:

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

但是当我将其更改为this时，额外的空间消失了!

#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。尝试使用'overflow:auto'作为父块。div

内带有页边距的子元素http://jsfiddle.net/fliptheweb/8q3Ca/2/

Answer 2

用下面的css代替#main， #show-rec-box和#rec-wrap。这是你想要达到的目标吗?

#main {
    border: solid 1px #ececec;
    width: 793px;
    float: left;
}

#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
}
#rec-wrap {
    margin: 0px 27px 0px 28px;
    height: 100%;
    overflow: hidden;
    float: left;
}