SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Greetings!

    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?

    span.ChapterNum
    {
    position: relative;
    bottom: 2px;
    }

    The w3schools.com 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: http://www.w3schools.com/css/css_padding.asp
    Padding example: http://www.w3schools.com/css/css_margin.asp

    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?


    Thanks.
    .

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.

    3) I answered above.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    <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.

    3) 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.

  4. #4
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    RyanReese, dresden_phoenix;

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •