tags:

views:

41

answers:

6

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 goes to 30px down from top. and stuck at same height.

any help will be appreciated thanks

+1  A: 

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

Galen
+1  A: 

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.

Steven Xu
On a related note, semantically, `span` is the catchall inline container, and `div` is the catchall block container. I would use `div` in this situation, which defaults to block styling. *Disclaimer:* this is a philosophy that varies between coders, and for every person with my philosophy you'll find someone who says that `span` is more appropriate in this situation.
Steven Xu
+3  A: 

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.

Scott
Note, `inline-block` has [spotty](http://www.quirksmode.org/css/display.html) reception across IE.
Steven Xu
Yes, but as the link you provided notes: "IE 6/7 accepts the value [`inline-block`] only on elements with a natural display: inline.", which a `span` does, so there should be no issue using it here.
Scott
A: 

needed to add position: relative in there thanks!

A: 

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

srigi
A: 

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.

Lajla