html - コンテナに含まれる要素のマージントップをオーバーフローなしで「クリア」します:hidden?

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:hiddendiv の外にコンテンツを配置する必要があるため、使用したくありません。では、どのような可能性があるのでしょうか? border-topまたはを使用できることはわかっていますpadding-topが、これは少しハックなようです。外側の div に内側の div のマージンを「尊重する」ように指示する他の方法はありませんか (明確ですか? 正しい言葉は何ですか?)。

対応する jsFiddle は次のとおりです: http://jsfiddle.net/jmuheim/C3eDa/

Answer 1

外側のコンテナーで疑似要素を使用して、内側のコンテンツの余白をクリアできます。

試す：

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