HTML边距 - 顶部和底部

Question

我使用两个div，一个在顶部没有内容或高度，另一个在它下面有一些内容或只是高度。我希望在它们之间留出一些空间，而不是仅在第一个div上使用margin-bottom或者在第二个div上单独使用margin-top，而是在两者之间均匀地共享空间，即第一个div上的空间的一半。在第二个div的顶部，保证金底部和一半的sapce。出于某种原因，两个中只有一个似乎适用而另一个被忽略。

查看此示例

http://jsfiddle.net/hkgq22x8/

＆＃13;

＆＃13;

body {
    margin:0px;
}
.element1 {
    margin-bottom:10px;
}
.element2 {
    margin-top:10px;
    border:1px solid #000;
    height:30px;
}

＆＃13;

<div class="parent">
    <div class="element1"></div>
    <div class="element2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

尝试删除margin-top上的.element2或margin-bottom上的.element1，空格保持不变，但同时删除这些空格会消失。