SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to re-create this using one <p> element?

    Hi, i'd like to create the attached image using just one <p> element and some css. I'm sure i've done it before somewhere but i'm just having a total css writers block. The main thing i cannot see / remember how to do is the vertical spacing between lines. I'm sure it's simple, but i just cannot think what css property i'm forgetting to use.

    Thanks for any advice at all!

    how-to-recreate.png

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    Try this:

    HTML Code:
     <p style='padding:2em'>
      Lorem isum dolar...
     </p>

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi John. Thanks for the reply but that won't work for this. If i was using 3 <p> elements for this, then yes, that would work. But i'd like to do it in one <p> element as that makes sense semantically!

    Cheers
    John

  4. #4
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    I do not understand

    If the text is "Lorem ipsum ..." and not an image then using "line-height:2em" may achieve the desired result.

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What i need is to have the background colour of each line to be white, but then there needs to be a margin-bottom:5px between each line. As you can see, there are 3 lines. Maybe i'll just do multiple p elements..

    Cheers

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Well, in the end...

    In the end i threw a <span> in there and add the white background to that whilst giving the <p> enough line height to have the clearance.

    Thanks for your help!

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Set <p> to display:inline, you don't need an extra <span> for it.

    Code:
    p {
      background:#fff;
      color: #000;
      display:inline;
      line-height:1.5;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! i knew i'd done it before without any extra markup! Awesome stuff, thanks for that, it was starting to drive me a bit mad!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,829
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You won't be able to put padding at the start and end of each line though as inline elements only place the padding at the beginning and then right at the end. We had this question a while back and if you need padding then it becomes very tricky and requires nested elements.

    I couldn't find the original thread but found this one which is similar but doesn't have the separation between lines but has a good wrapping behaviour. Not much use for this question though .

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!


Tags for this Thread

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
  •