SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Line Heght In Two Places

    SitePoint Members,
    On my site I have
    body{line-height:1.0;font-family......
    and
    p{line-height:1.25em;text-indent

    Since p (paragraph) is under body,won't there be problems?
    For me, left and right columns have leading that's too close, in the center column the leading is fine.
    In body, "I" see that don't even give units.

    Is stating the units necessary in css? Should I change body line-height to 1.25 even though the body body line height is fine and the column line-height is too narrow?

    Thanks,

    Chris

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    If you don't like the line height in a particular area of the site, then perhaps set it there—either on the elements themselves or on their container.

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,151
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    To answer your question about unitless line height, you might find this helpful, quoted from a post I made in another thread.

    If you set line-height:1.4em on your body, it sets the line-height for the entire document to 1.4 x your body font size. Suppose you set your body to font-size: 1em, to use the visitor's default browser setting. If they have their font size set at 20px (to make the calculation easy ), then the resulting line-height is 28px. Suppose you then set font:size: 1.5em on an element. That will increase the font size to 30px, but the line-height remains at 28px, causing overlapping. You need to reset the line-height on the element itself for the line-height to apply to the new font size. i.e. 20x1.5x1.4 = 42px. Same thing applies if you set the font-size and line-height on body using % - you need to reset the line-height whenever you change the font size.

    However, if you set the body line-height using a raw number with no units, then it is taken as a scaling factor, and used to scale the line-height according to the font-size of the element. So in the above example, when you set the font-size to 1.5em, resulting in 30px text, the line-height is applied as 30x1.4 = 42px. This works for any element, however deeply nested - provided, of course, you haven't over-ridden the line-height declaration elsewhere.

    To me, this is counter-intuitive, as I'd expect % to be a scaling factor, but nevertheless this is how it works.

  4. #4
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I removed {line-height:1.25em in p
    and for
    body{line-height:1.0...
    I put
    body{line-height:1.25... with no units

    I understand it now. The body setting is a global setting. If in some area you have a need that's different than the global setting, then you place a setting for that area.

    Thanks Ralph, TB,

    Chris77


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
  •