SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    background of line-height?

    what maybe yet another stupid Q:

    When an element is inline or displayed inline, and a line height is set.. what is theactual height of the element ( for background purposes)

    example :


    ul{background: yellow; font-size: .7em; float: left; text-align: center; padding:0; margin:0}
    ul li { padding:0; margin:0; display: inline; line-height: 2.15em}
    ul li a { padding:0 .5em;line-height: 2.15em}
    ul li a:hover {backgroundink;}


    Here my list seems to display horizontally, as intended, with a height of 2.15 em, also as intended, but when I hover a link only the te actual text has a pink bg, where as I would have expected the bg to include the entire line height....

    what am i missing here?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the line-height specifies the height of each line (aka the spacing between each line)

    The actual content won't get the increased height thus the pink background won't cover the entire line-height. Line-height is sorta like a margin between each line, if you want to think about it like that .

    Putting a border around the anchor will show you the height of the anchor (notice the line-height doesn't affect the height)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Good question

    The inline formatting model is extremely complicated.

    In your example you set the yellow background on the parent block element but you changed the background color on the child inline element whose background only stretches as far as the "content area" of that inline element.

    The background of an inline element does not include it's line height.

    If you applied the yellow background to the anchor to start with you would see that only the content area (the font size of the element) is covered.

    If you float the lists or make then display:block then they take on the full height of the parent.

    It's basically the difference between inline and block elements again.


    10.6.1:
    The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, not the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    i see..
    I was trying to avoid floating the list in the first place.. but I guess I will need a plan b

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Plan B : display:inline-block

    Still not without it's problems though.

    Or use padding:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
        font-size: .7em;
        float: left;
        text-align: center;
        padding:0;
        margin:0;
        line-height:2.15em;
        background:yellow;
    }
    ul li {
        padding:0;
        margin:0;
        display: inline;
    }
    ul li a {
        padding:.5em .5em;
    }
    ul li a:hover {
        background:pink;
    }
    </style>
    </head>
    <body>
    <ul>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
    </ul>
    </body>
    </html>


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
  •