How to decrease the space between wraps line?

It's not clear right now looking at the links in the boxes if the 2lines of text belong to one link, http://keckmed.usc.edu/pp/  .  For example, under  "Miscellaneous"
    * Directory for Departments and USC Staff
The link is wrapped into 2 lines.  I thought maybe by closing the space between the 2 wrapped lines would help.  Any other suggestion to improve the look would also be appreciated.  thank you.
lapuccaAsked:
Who is Participating?
 
Kim WalkerWeb Programmer/TechnicianCommented:
Decreasing the line-height or increasing the top/bottom margin would definitely help. You could reconfigure the unordered list so there's a bullet for each link. Or you can create a hanging indent where the first line is left aligned and all subsequent lines are indented by giving the li element a left padding of 18px and a text-indent of -18px (negative indent).
0
 
lapuccaAuthor Commented:
I found it helpful to increase the line-height.  That separates each list item with more space between each link.  However, I still don't know how to make the "wrapped" 2nd line space decrease or somehow make it look like the 2line is just part of the 1st line's extension of just one link.  There is still too much space between these 2 lines.

Also, can you give css example on how to create a hanning indent for wrapped created 2nd line+ ?  Thank you.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Line-height affects the height of all lines, including wrapped lined. Margin and padding affect the space between elements such as list items. Try decreasing the line height and increasing the margin-top.

The hanging indent is exactly as I said:
padding-left: 18px;
text-indent: -18px;

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kim WalkerWeb Programmer/TechnicianCommented:
That should have been "including wrapped lines."
0
 
lapuccaAuthor Commented:
I see now that the line-height does affect the space between lines of the same one link.  However, when I increase the top margin, it just moves the entire groups of links further lower in the list box.  It did not affect at all the space between each link.  Thank you.
0
 
lapuccaAuthor Commented:
Ah, got it.  Adding space to the li item's bottom margin does the trick.  Not adding it to the entire link list.
.Links li {
    margin-bottom: 10px;
}

many thanks for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.