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

这里是css/hmtl新手。我一直在和div打交道，我有一些奇怪的行为，我无法理解/解释。我在“more”链接下面得到了额外的空间，它应该在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; 
}

不带额外边框的完整代码： 带额外边框的代码： 知道发生了什么吗？？非常感谢

您在rec标题上有页边空白。这是边距折叠-尝试对父块使用“溢出：自动”。类似问题

---

用以下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;
} 

---

谢谢你的帮助。然而，我对rec标题边距是个问题感到困惑，当我删除rec标题边距以查看效果时，“more”下面的额外空间问题仍然存在。您能解释一下为什么divshow rec框的内容溢出，需要“overflow:hidden；”吗？谢谢lot@trying_hal9000我添加了w3c规范的链接和类似的问题——有几种方法可以绕过它。如果浮动div，它们将包含子元素的边距并防止边距折叠。另一种方法是向div添加边框或填充。