user31673
user31673

Reputation: 13695

What CSS styling to give more spaces between hyperlinks

I have an ASP.NET application with contains a list of hyperlinks. After each hyperlink, there is a br tag that puts each hyperlink on their own line. I want to increase the spacing between each line. I don't want to add another br trag since that does not provide the control I am looking for. I have tried different CSS styling without any change. What CSS styling do I use to accomplish this?

Upvotes: 0

Views: 1747

Answers (5)

Daniel K
Daniel K

Reputation: 7083

i think what you are looking for is line-height:

http://www.w3.org/TR/WCAG20-TECHS/C21.html

even though this might be the better/'nicer' solution:

<ul id="mylinklist">
    <li><a href="#1">Link 1</a></li>
    <li><a href="#2">Link 2</a></li>
    <li><a href="#3">Link 3</a></li>
    <li><a href="#4">Link 4</a></li>
    <li><a href="#5">Link 5</a></li>
</ul>

and this style:

ul#mylinklist{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul#mylinklist li{
    margin-bottom: 10px;
}

Upvotes: 1

Mutt
Mutt

Reputation: 935

use margin-top or margin-bottom

a{
margin-bottom: 1em;
}

Upvotes: 0

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

Remove the <br /> elements and instead give those anchor elements a display:block property.

Then use padding-top or padding-bottom or margin-top or margin-bottom to increase the space between.

Upvotes: 1

Dan Diplo
Dan Diplo

Reputation: 25339

You could add margin or padding to top of your BR tags eg.

br { margin:10px 0; }

If that isn't feasible, then make your hyperlinks block level and add margin or padding to top of them eg.

a { display:block; margin:10px 0; }

Using the latter method you don't require the BR tags anymore.

Upvotes: 2

Colin
Colin

Reputation: 2021

For the hyperlinks you could use display:block; and margin-bottom:[some value] style/CSS properties, you wouldn't need to have your BR elements, and you would gain much more control.

Upvotes: 7

Related Questions