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;
}

已按照@tomaroo 的建议更新为 inline-block，但这可能不适用于旧版浏览器。