Unordered Lists

soozyq · 22-09-2009 04:33PM #1

I have created a unordered list with each item being a link, but have been unable to increase the space between each item on the list (vertically). At the moment it looks like the spacing below. I want to basically create a space of about 30px between each item.

Item 1
Item 2
Item 3

How do I create the space? The list is enclosed in a div.
Im sure this is very simple but I would appreciate any input.
Thanks:)

Pixelcraft · 22-09-2009 04:55PM

add padding to the <li> with css

Kila · 22-09-2009 04:58PM

You could apply a style to the list or the list items and add padding/margin around them to increase the space.

e.g.
.li spaced{
padding-bottom:30px;
margin-bottom:30px;
}

Then either have the list items call their class (<li class="spaced">) or create an overall class for the ul and have the li styling inherited.

louie · 22-09-2009 05:47PM

kila is going the right way but there is a wrong typo in the code.

My way
give the ul an id and style the li inside by adding padding to it

<ul id="my_ul">
    <li>LINK</li>
    <li>LINK</li>
</ul>

and now style the li using CSS

#my_ul{margin:0px; padding:0px}/* this is the ul id */
/*now the li style */
#my_ul li{padding:3px 0px 3px 5px;/*top,right,bottom,left*/}

Unordered Lists

Comments