html/css, how to make element padding not cover over previous elements?

css, html

Solution

Add `display: inline-block` to `#pad-me-out`

so;

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

Updated to `inline-block` as suggested by @tomaroo however this might not work in older browsers.

Problem

I have written a jsfiddle of the issue. I want the `span` with the padding to be pushed further down so it does not obscure the one above it. It currently appears that the layout only takes into account the content text size and ignores the padding. I would like to be able to achieve this with a generic css rule that works regardless of what padding values the overlapping span has, if that is possible. 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; } ```

Original source