Solved

How to decrease the space between wraps line?

Posted on 2012-03-20
6
176 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 21

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 21

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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 21

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

743 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

17 Experts available now in Live!

Get 1:1 Help Now