Solved

How to decrease the space between wraps line?

Posted on 2012-03-20
6
179 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

829 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