CSS problem height from top

using css how do I put a span on top of other spans. I have several spans in the page and at the end of the page I have this

<span id="lastSpan" style=" margin-left:726px; margin-top:30px;"></span>

problem with that is that it never goe开发者_Python百科s to 30px down from top. and stuck at same height.

any help will be appreciated thanks

Span's are inline elements and don't adhere to margin on top and bottom. You need to set it to display: inline-block if you want margin to work.

spans are inline elements. you cant apply margins to them. use a div if you need a generic container with margins/height.

Inline elements can't be styled the same way as block elements. For one, they are (entirely?) unresponsive to margin and height commands. The solution is to add display: block; to your styling to force block styles.

span wont accept margin properies, cos it is inline element. You can change it to block element by display:block, float:left/right or position:absolute

This might be captain pædantry to the rescue, but that spans are inline-level has little to do with this. The fact that most (all) browser's house-style sheet implicitly sets the span's property on display:inline does unless the author or the user explicitly overrule this does though. As far as I know, the W3C does not define what the house style of browsers must be, but they do give some pointers for interoperability.

Of course, this might not be as relevant here, but there are actually some places where browsers don't pick their styles all the same. Notably Safari and Chrome do not place a dashed border under abbr by default while Firefox and IE do. Also, some browsers space paragraphs by using margin-top:1em; while others use margin-bttom:1em, in most cases this doesn't matter but there are some cases where defining explicitly which of the two you want in your site is in fact needed for a consistent look.