SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    padding between words in a div ?

    hey, is htere a way to set padding between words in a navigation div ?
    thanks

  2. #2
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <html>
    <head>
    <title>bla</title>
    <style>
    p{word-spacing:10px;}
    </style>
    </head>
    <body>
    <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks that worked, but how do i do for links ?
    it doesn't seem to work on them

  4. #4
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <html>
    <head>
    <title>bla</title>
    <style>
    a{word-spacing:110px;}
    </style>
    </head>
    <body>
    <a href="#">bla bla bla bla bla bla bla </a>
    </body>
    </html>

    it works for me?

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I will just suggest that you use EM rather than PX for word-spacing so the space can uniformly grow/shrink if the text is re-sized.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't know how this em works :@
    is it lie 1em is x PX or somthing ?

  7. #7
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sanzo
    i don't know how this em works :@
    is it lie 1em is x PX or somthing ?
    Basically, an EM inherits its size from the parent containers' font-size.

    Lets look at this quick example:
    HTML Code:
    <div id="box">
    This is some text.
    </div>
    Code:
    #box {
      font-size: 10px;
      word-spacing: 2em;
      width: 40em;
      height: 10em;
      background: pink;
    }
    In that case, 1 EM will be equal to 10 PX the set font-size. That makes the gap between each word 20 PX. Now try increasing the text size through the browser, and you'll notice the gap grows, as do the boxes dimensions. This is because the size of the EM automatically re-adjusts to match the font-size.

    Because of this adaptable size, EM's are perfect for some situations, but don't work so well in others.

    Common uses include:
    • Gaps between paragraphs and other blocks of text
    • line-height


    And it's even possible to use EM for whole layouts:

  8. #8
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i'll try it
    but 10px looks much, how can you make that smaller, but keep the font size ?

  9. #9
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Code:
      something: 0.5em;
      something-else: 0.03em;
      something-bigger-and-fatter: 255.56em;
    You may find the Em Calculator handy.


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
  •