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 to #pad-me-out

所以;

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

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

Answer 2

解决方案：在您的CSS中添加以下内容。

#pad-me-out{ display:inline-block; }

逻辑/描述： Span标签是内联元素和内联元素，只是忽略填充，因此我们应该定义一个显示属性，它支持填充和壁橱内联是内联块。