在 < li > 元素之间添加空格

小开

You can use the margin property:

li.menu-item {
margin:0 0 10px 0;
}

Demo: http://jsfiddle.net/UAXyd/

小开

最佳答案

UPDATE 2021

My original answer was from 2012 when many of the Level 3 CSS Selectors did not exist. To achieve this we would need JS or other explicit CSS styles/classes to achieve it. As @AlphaX has pointed out the best solution now is simply

li.menu-item:not(:last-child) {
margin-bottom: 3px;
}

OLD ANSWER

add:

margin: 0 0 3px 0;

to your #access li and move

background: #0f84e8; /* Show a solid color for older browsers */

to the #access a and take out the border-bottom. Then it will work

Here: http://jsfiddle.net/bpmKW/4/

小开

I just want to say guys:

Only Play With Margin

It is a lot easier to add space between <li> if you play with margin.

小开

Since you are asking for space between , I would add an override to the last item to get rid of the extra margin there:

li {
background: red;
margin-bottom: 40px;
}


li:last-child {
margin-bottom: 0px;
}


ul {
background: silver;
padding: 1px;
padding-left: 40px;
}

<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>

The result of it might not be visual at all times, because of margin-collapsing and stuff... in the example snippets I've included, I've added a small 1px padding to the ul-element to prevent the collapsing. Try removing the li:last-child-rule, and you'll see that the last item now extends the size of the ul-element.

小开

#access a {
border-bottom: 2px solid #fff;
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 10px 0 20px;
text-decoration: none;
}

I see that you had used line-height but you gave it to <a> tag instead of <ul> Try this:

#access ul {line-height:3.333em;}

You wouldn't need to play with margins then.

小开

Most answers here are not correct as they would add bottom space to the last <li> as well, so they are not adding space ONLY in between <li> !

The most accurate and efficient solution is the following:

li.menu-item:not(:last-child) {
margin-bottom: 3px;
}

Explanation: by using :not(:last-child) the style will be applie to all items (li.menu-item) but the last one.

小开

Simple and fast. Just put css into ul element (the 'gap' property defines space between li elements):

display: flex;
align-items: flex-start;
flex-direction: column;
gap: 40px;

小开

There is a powerful feature of flex that allows for specifying space between every child without having to reference the "last-child" through gap. I find myself using more often than margin at this point:

ul {
display: flex;
flex-direction: column;
gap: 10px;
}

Example

li {
background: red;
}


ul {
background: silver;
display: flex;
flex-direction: column;
gap: 10px;
}

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>