html - 使容器“清除”包含元素的边距顶部而不会溢出：隐藏？

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-topor padding-top，但这对我来说似乎有点 hacky。没有其他方法可以告诉外部div“尊重”（清楚吗？正确的词是什么？）内部div的边距？

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

score 0 · Accepted Answer

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

尝试：

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

score 0 · Accepted Answer

你的问题措辞不是很好，所以我尽可能地回答了。我假设您想要内部 div 上方和外部但在外部 div 内部的 10px 空间。因此，我建议将填充放在外部 div 的顶部。无论如何，这将在内部 div 上强制 10px 上边距。

.outer {
    padding-top:10px;
}

2 回答 2