使用边距和填充时，嵌套div的层次结构具有意外的重叠边框

Question

当嵌套<div>时，margin和padding开始重叠。我从the spec's了解到margin，border和padding只是元素占用的空间的一部分，每个元素都应该保留在父{的内容区域中{1}}。

显然我理解错了，但我希望有人可以解释我。

一句话：请帮助我让<div>留在thingy内。最好是以自然（不太苛刻）的方式。

感谢您阅读以及您可以提前分享的任何见解！

小提琴：

http://jsfiddle.net/WrasM/2/

HTML（确保HTML中的换行符没有任何影响）：

top

CSS：

<!--
--><div class="parent"><!--
    --><div class="top"><!--
        --><div class="thingy">label 1</div><!--
        --><div class="thingy">label 2</div><!--
        --><div class="thingy">label 3</div><!--
    --></div><!--
    --><div class="bottom"><!--
        -->some test content<!--
    --></div><!--
--></div><!--
-->

结果：

Answer 1

将.thingy更改为display:inline-block。

此规范页面http://www.w3.org/TR/CSS2/box.html上的8.3部分说 These properties have no effect on non-replaced inline elements.和margin-top的{​​{1}}。