Solved

How to decrease the space between wraps line?

Posted on 2012-03-20
6
178 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 500 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

910 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now