html - html/css、要素のパディングが前の要素を覆わないようにする方法は?

Question

私は問題のjsfiddleを書きました。spanパディングをさらに押し下げて、その上のパディングを覆い隠しないようにしたい。現在、レイアウトはコンテンツのテキスト サイズのみを考慮し、パディングを無視しているようです。可能であれば、重複するスパンのパディング値に関係なく機能する一般的な css ルールでこれを実現したいと考えています。

html:

<span class='outer'>
    <span class='inner'>
        <span class='content'>Hello</span>
    </span>
    <span class='inner'>
        <span class='content'>
            <span id='pad-me-out'>
                World
            </span>
        </span>
    </span>
</span>

CSS:

.outer > .inner{
    clear:left;
    float:left;
}

#pad-me-out{
    background: #999;
    padding:7px 14px;
}

Answer 1

display: inline-blockに追加#pad-me-out

それで;

#pad-me-out{
    background: #999;
    padding:7px 14px;
    display: inline-block;
}

inline-block@tomaroo の提案に従って更新されましたが、これは古いブラウザーでは機能しない可能性があります。