删除边框时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

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