CODEWITHSUNDEEP
css
JudyJ
JudyJ

Reputation: 597

How can I add space to <li> elements at the top and bottom with CSS?

I have the following.

<ul>
    <li><a class="admin_btn" href="/adminFormat" style="width:100px;">Format</a></li>
    <li><a class="admin_btn" href="/adminStatus" style="width:100px;">Status</a></li>
    <li><a class="admin_btn" href="/adminMembership" style="width:100px;">Membership</a></li>
</ul>

And

a.admin_btn {
    border: 1px solid #666;
    background: #ddd;
    padding: 2px 5px;
    margin: 10px;
    color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

a.admin_btn:hover {
    background: #bbb;
    color: #000;
}

But when I use this on my web page, the buttons are too close together vertically, and the <li> circles show.

How can I space out the buttons and remove the <li> circles?

Upvotes: 0

Views: 387

Answers (2)

Richard
Richard

Reputation: 909

This will remove the dots:

li.leaf, li.collapsed, li.expanded {
    list-style-image: none;
    list-style: none;
    list-style-type: none;
}

ul {
    list-style-image: none;
    list-style: none;
    list-style-type: none;
}

And for the space:

li {
    margin-top:10px;
    margin-bottom:10px;
}

You can replace 10px with any value you want to get the desired space.

Upvotes: 0

Pekka
Pekka

Reputation: 449465

To remove the circles:

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

to add space, for example use:

li { margin-bottom: 16px }

Upvotes: 2

Related Questions