使容器“清除”一个包含元素的margin-top而不溢出：隐藏？

Question

我有一个外部div和一个内部div。我希望内部div在外部div的顶端有10px的余量。

<div class="outer">
    <div class="inner">
        this one should have 10px margin top to the outer div!
    </div>
</div>

我不想使用overflow:hidden，因为我需要在div之外放置一些内容。那有什么可能性呢？我知道我可以使用border-top或padding-top，但这对我来说似乎有些苛刻。是不是有任何其他方式告诉外部的div＆＃34;尊重＆＃34; （清楚？什么是正确的词？）内部div的边缘？

这里有相应的jsFiddle：http://jsfiddle.net/jmuheim/C3eDa/

Answer 1

你的问题措辞不是很好，所以我尽力回答。我假设你想要一个10px的空间，在内部div之上和之外，但在外部div中。因此，我建议将填充放在外部div的顶部。无论如何，这将强制内部div的10px上限。

.outer {
    padding-top:10px;
}

http://jsfiddle.net/C3eDa/2/

Answer 2

您可以使用外部容器上的伪元素清除内部内容的边距。

尝试：

/* clear margins of inner content */
.outer:before, .outer:after {
    content: "";
    display: table;
    clear: both;
}