Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jonmarc Stevens
Jonmarc Stevens
6,414 Points

Spacing between list elements

Hey everyone!

I have a question about how to add spacing in between a vertical list. Basically I'm creating a side navigation bar, but the list items are too close.

Thanks again,

Tiffany McAllister
Tiffany McAllister
25,806 Points

No problem! Glad you got it working! :)

2 Answers

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

To create space between list items you can use the margin property.

li {
    margin-bottom: 10px;
}
Jonmarc Stevens
Jonmarc Stevens
6,414 Points

That did it! Thanks Tiffany!!

Tiffany McAllister
Tiffany McAllister
25,806 Points
Tiffany McAllister
Tiffany McAllister
25,806 Points

Have you tried some padding or margin?

Jonmarc Stevens
Jonmarc Stevens
6,414 Points

I tried using padding however it just adds space around the list items and not in between them. I'm aiming for something like this:

Item 1

Item 2

Item 3

etc.