How do i space out items in nav bar?

[okpeery]

In my vertical nav bar I want the links to be spaced out more. I used line height 150% which worked but caused problems with links to other pages in my site. My nav div is narrow so some of my links are on 2 lines for example, Professional Development.
Professional
Development
The problem with line height is that it spaces that out too. I would like single spacing between Professional and Development and like double or triple between each item in the nav bar. I know I can do it with <br> tags but there must be some other way. I can't find it anywhere I looked.

 

[robherc]

You could also put each link in it's own [tt]<p>insert link here</p>[/tt]

That would eliminate the need for [tt]<br>[/tt] tags in this case (although this is one of the very few instances where I will ever recommend you use the [tt]<p></p>[/tt] tags).


I hope this helped;
Rob Hercules

 

[OsakaWebbie]

Also, you can specify the top and/or bottom margins for the text of each link using CSS:

<style>
.navitem {margin-top: 8pt; margin-bottom: 8pt;}
</style>
...
<div class=navitem>My Link</div>
-or-
<p class=navitem>My Link</p>

However, you haven't shown us your code of how you are separating the items now (table rows? div's?), so we don't know what you're starting with - if you share that snippet of your code, we could probably give you more specific suggestions.

 

[Vragabond]

That would eliminate the need for <br> tags in this case (although this is one of the very few instances where I will ever recommend you use the <p></p> tags).

Where do you usually put text in if not paragraph tags? What other tag is semantically appropriate to hold large chunks of text?

 

[okpeery]

Again, I will post my code later, when more convenient. Is there a simpler way to do it than to do a custom class? The only problem with using line height 150% is that some links are 2 lines because my div for the navigation is narrow. This makes the link look spaced apart:

Professional

Development

Instead of this

Professional
Development

 

[OsakaWebbie]

It doesn't matter whether you make a separate class or not. The point is that rather than using the line-height directive, try margin-top and/or margin-bottom, which affect only the space above and below text that wraps, not the space within it. If you have used word processors, it's like the difference between line spacing and the space above/below paragraphs.