Grow your CSS skills. Land your dream job.

Need help adjusting line height between Line Items

  • # June 15, 2010 at 7:54 pm

    I have the UL set a 1.8em and the li set at 1em but they are using the UL spacing. So I want bigger spacing between the line-items but less within the line-item. For instance, the layout looks perfect unless there is word-wrap in the line-item because then it is spaced the same as between the line-items.

    Code:
    ul#left {
    margin: 10px 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.8em;
    color: #003075;
    }

    #left li {
    padding: 2px 50px;
    line-height: 1em;
    font-size: 1em;
    font-weight:bold;
    color: #003075;
    text-decoration: none;
    list-style-type:none;
    }

    How do I make it so the line items are separated by 1.8em but the line-items themselves have a 1em spacing?
    Thanks in adavnce!

    # June 16, 2010 at 4:14 am
    Code:
    #left {
    margin: 10px 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #003075;
    }

    #left li {
    padding: 2px 50px;
    line-height: 1em;
    height: 1em;
    margin: 0 0 1.8em 0;
    font-size: 1em;
    font-weight:bold;
    color: #003075;
    text-decoration: none;
    list-style-type:none;
    }

    I’m not actually 100% sure about what you are trying to say. If this doesn’t work then upload a working example or an image of the problem.

    # June 16, 2010 at 12:42 pm

    Thatdidn’t really work and I apologize for not being able to explain myself :?
    Here’s the page I’m messing with but beware that it is used elsewhere; whenever there’s left side navigation.
    http://www.do-rightweb.com/fertility/egg-donor.html
    Thanks for you assistance!

    # June 16, 2010 at 2:36 pm

    If you are using line-height then each new line will be spaced as per your css. If you want more space between the li tags give them a margin-bottom to space them further apart.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".