css - 删除边框时div调整大小

Question

我最近开始遇到这个问题，在我删除边框后会调整 div 的大小。

注意这个jsfiddle：http: //jsfiddle.net/rALvd/1/

如果删除黑色边框，红色 div 的顶部和底部不再有 50px 的边距，但底部似乎有更大的空间。

当您添加边框时，红色 div 会恢复到正确的边距。

这是代码：

<div id="main_contact">
<div id="contact_contain">
    <div id="contact_form">
    </div>
</div>
</div>

#main_contact {
width: 100%;
height: 450px;
border: 1px solid black;
}

#contact_contain {
position: relative;
width: 100%;
height: 350px;
margin: 0 auto;
background: url(homepage/contact.png) center center no-repeat;
margin-top: 50px;
border: 1px solid red;
}

Answer 1

这是盒子模型的正常行为。如果您不想改变大小，我建议您更改边框颜色以匹配相邻区域，使其不可见。