Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Padding on span with bg colour (when turning to new line)

    Hi,

    If I have a span containing some text with a background colour, is there a way I can add padding to the ends of the lines so that if the text turns onto a new line there is still some padding between the end of the text and background colour?

    You can see what I mean here

    See the smaller type on white bg on the home page slideshow, even though I have padding set as:
    Code:
    padding:3px 0 3px 3px
    the text is close against the edge of the bg on the left hand side.

    Any ideas how I can add some padding to the left?

    Thanks

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    I do not understand what you mean.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, not very clear I know.
    So, you see the photo slideshow. The smaller text overlaid on that with the white background. You see there is about 3px of padding on the left side of the first line (between "This is dummy..." and the end of the white bg)...well, it doesn't appear on the next line down, between "should..." and the end of the white bg)...

    The second line is just turning naturally because of the width of the containing div.

    I just want to avoid having zero padding on the end of those lines there.

    Any thoughts?

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    You can't add padding on an inline element. You put the padding on the span tags.

    Add this code. This turns the span tags into block elements and will allow you to specify padding on them.
    Code:
    .fpss_introtext span.heading {
    	display: block;
    }
    
    .fpss_introtext span.fpss {
    	display: block;
    }

  • #5
    New Coder
    Join Date
    Feb 2005
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks SoBrien,

    Ah yes, got it.

    Ok, what I want to do is to keep the white background behind the text extending just as far as the text goes, with just a bit of extra padding on the end, rather than displaying the chunk of smaller text as a block. Any solutions?


  •  

    Posting Permissions

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