SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    the line-hights between paragraph

    Code:
    <p>This is title1. This is title1. This is title1. This is title1. This is title1. This is title1. This is title1. 
    This is title1. This is title1. This is title1. <span class="textGray">[2004-08-25]</span></p>
    	
    <p>This is title2. This is title2. This is title2. This is title2. This is title2. This is title2. This is title2. 
    This is title2. This is title2. This is title2. <span class="textGray">[2004-08-25]</span></p>
    	
    <p>This is title3. This is title3. This is title3. This is title3. This is title3. This is title3. This is title3. 
    This is title3. This is title3. This is title3. <span class="textGray">[2004-08-25]</span></p>
    I think that the result of the above code is too wide between <p></p> tag at http://220.89.242.19:8500/test/006/home/index.cfm .

    How can I make a little bit more smaller the line-heights between paragraphs?

  2. #2
    SitePoint Member
    Join Date
    Jul 2003
    Location
    US
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can adjust the margin for the P tag in your stylesheet. Such as:

    p {margin-bottom: .25em}

    Or whatever you're looking for.

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joon
    How can I make a little bit more smaller the line-heights between paragraphs?
    Simply specify either top-margin, bottom-margin, or both on your p. Where there is no specification in the CSS, the browser default will apply, so you'll need to specify these margins if you want to change them.

    It will mean a bit of trial and error to get the exact look you want.

    I recommend making sure your text size is set in a relative unit (e.g. em) and then using this unit for your margins as well, so that when the text is re-sized the space between paragraphs will remain relative to the text size.

    For e.g., your style sheet might say:
    Code:
    p {
      margin-top: 0;
      margin-bottom: 1.5em;
    }
    Just play with it till it looks right to you. :-)

    If you want to change the line height within the paragraph, set the line-height under p as well. Again, tweak it till it looks right in proportion to the paragraph spacing and text size. I find 1.3em-1.4em works well but diff'rent strokes...

    HTH.

    mate. :-)

  4. #4
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mate
    p {
    margin-top: 0;
    margin-bottom: 1.5em;
    }
    What does " em " stand for?

    Why doesn't "margin-top" has "em" While "margin-bottom" has it?

  5. #5
    SitePoint Member
    Join Date
    Jul 2003
    Location
    US
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joon
    What does " em " stand for?

    Why doesn't "margin-top" has "em" While "margin-bottom" has it?
    Basically what we're doing is adding space to the bottom of the paragraph but not the top. Otherwise the top and bottom spacing would combine to create even more space.

    Em is a relative measurement of the font. I believe it stands for the height of the capital M of that font. So as the font changes the relative measurement changes (for instance from size 12px to size 14px but also between Times to Arial, which have different heights).

  6. #6
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joon
    What does " em " stand for?
    Em is approximately the width of the letter m of any given font.

    Why doesn't "margin-top" has "em" While "margin-bottom" has it?
    Wherever 0 is used there is no need to specify a unit of measurement. 0 is 0 whether it's ems, pixels, percentages or miles. :-)

    Any other value besides 0 must have a unit of measurement specified.

    HTH.

    mate. :-)

  7. #7
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL jweidner, you keep pipping me to the post.

    How's that for service, joon? Two of us racing to answer your questions? Haha.

    mate. :-)

  8. #8
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mate
    LOL jweidner, you keep pipping me to the post.

    How's that for service, joon? Two of us racing to answer your questions? Haha.

    mate. :-)
    The service is excellent. ( I am not sure whether I understand the above quote correctly, this answer is from under the condition I understand your comment correctly)


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
  •