Html / css how to make adding elements not overlap previous elements?

Question

I wrote jsfiddle problems. I want the span to be indented further so that it does not obscure one above it. It is currently displayed that the layout only considers the size of the content text and ignores the padding. I would like to be able to achieve this with a general CSS rule that works no matter what fill values ​​have an overlapping range, if 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; } 

Answer 1

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 may not work in older browsers.

Answer 2

Solution: Add the following code to your css.

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

Logic / Description: The Span tag is an inline element, and inline elements simply ignore debugging, so we need to define a display property that supports adding and closing inline lines, it is an inline block.