Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to decrease the space between wraps line?

Posted on 2012-03-20
6
Medium Priority
?
188 Views
Last Modified: 2012-03-21
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.
0
Comment
Question by:lapucca
  • 3
  • 3
6 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 2000 total points
ID: 37745517
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
 

Author Comment

by:lapucca
ID: 37745881
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37746733
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Expert Comment

by:Kim Walker
ID: 37746736
That should have been "including wrapped lines."
0
 

Author Comment

by:lapucca
ID: 37748818
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
 

Author Closing Comment

by:lapucca
ID: 37748849
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question