Can <span> tags be used with "relative" positioning, margin, padding?


I have three questions about <span> tags.

I am using a span tag for placing footnote numbers slightly above the text line.

(For this particular project I prefer using the <span> tag instead of the Html superscript <sup> tag.)

Question 1). Is it proper CSS to use relative positioning with <span> tags?

position: relative;
bottom: 2px;

The web site shows how to use padding and margins with elements.

If I substitute <span> tags for the <p> tags on the below example pages the padding directive seems to work with <span> tags but the margin directive does not seem to work with <span> tags:

Padding example:
Padding example:

Question 2). Is it proper CSS to use the padding directive with <span> tags?

Question 3). Is there a way to get the margin directive to work with CSS or is it not supposed to work?


  1. It depends on the situation. It’s certainly A-Okay to use position:relative on span elements, given the fact that what you are trying to achieve actually NEEDS to have it :).

The reason vertical padding /margin does not work with spans is that it’s an inline element. As such, no vertical will work :). In order for it to work, you can do a multitude of things.One such is to either float the spans (though you’ll have more work to deal with such as containing the floats) OR you can set display:inline-block which basically gives block level capabilities (such as being able to have width/height or vertical margins/paddings), while still retaining the inline ability of inlineelements.

2)Yes, of course. Whatever you need to do to achieve the layout :). Use it.

  1. I answered above.

Don worry about CSS. Concern yourself with SEMANTICS. IF you mean <sup> USE <sup>!!! You can always style that tag to fit your aesthetic needs with CSS.

Now about your questions…

  1. You can apply RP to just about any tag… this includes span, sup , etc. Keep in in mind that RP will do what it always does. That is, to move the display of the info but not the space reserved for it. This may or may not be of concern since you are “bumping upwards” …never the less it could cause some ugly overlaps.

  2. Yes and no. And what is it with this"proper" thing??? Inline elements, dont have dimensions and don’t have vertical parameters perform the way block elements do. You can still add padding and margin, but the top/bottom work differently than they would if you were dealing with, say , a DIV.

Just to show what I mean:

<p>Lorem <span>ipsum dolor</span> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
span{ background: pink; padding:3em}

You can see that the padding-left/ right moved the surrounding text but the padding-top/bottom: didn’t affect the text. Note that ALL the padding is THERE ( pink). If you moved the <span> to the middle of the P you will also note the stacking behaviour ( the text previous to the span goes UNDER the pink and the text after the span does not… in this sense, RP can help as you can apply z index to your element). Changing the example to "margin instead of padding and you will get similar results, except of course that margins are transparent.

  1. you could give your element display:inline-block. The behaviuor of the tag then would be similar to having an IMG tag.

Hope that helps.

RyanReese, dresden_phoenix;

Thanks for responding to my question. I appreciate the help.