html - 再次被盒子中的盒子难住了，这次是全彩和边框

Question

我在之前的帖子中问过关于在盒子中居中盒子的问题，但这次有点奇怪。我尝试了 2 个不同的代码。一个带有背景颜色，另一个只使用边框。似乎边框对齐得很好，但是有背景颜色的边框不对齐；尽管两者具有相同的代码。我将在下面提供。所以现在我试图将背景颜色居中。为什么背景颜色表现不同？

为什么第一个盒子的顶部有这么多空间？我如何将盒子完美地置于全彩色机身的中心？

<div id="box1">
    <div class="midbox"></div>
</div>
<div id="test1">
    <div class="testbox"></div>
</div>

* {
    margin: 0;
}
#box1 {
    width: 500px;
    height: 500px;
    background-color: black;
    margin: 20px auto;
}
.midbox {
    width: 200px;
    height: 200px;
    background-color: red;
    margin:130px auto;
}
#test1 {
    width: 500px;
    height: 500px;
    border:solid black 3px;
    margin: 20px auto;
}
.testbox {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 130px auto;
}

FIDDLE

Answer 1

#box1 的问题是由于 collapsing margins

only the margin of the element with the largest margin value will be honoured, while the margin of the element with the smaller margin value will be collapsed to zero.

If you apply padding or a border to the parent container then both margins will be honoured:

http://reference.sitepoint.com/css/collapsingmargins

请参阅本节:

Collapsing Margins Between Parent and Child Elements

另请参阅此示例:

http://www.garethredfern.com/articles/css-margin-collapse