How to underline list items separately with CSS? - css

Question

I would like to create some empty space between lines in my list. At the moment the lines are continuous. Here is a jsfiddle example I created: http://jsfiddle.net/bonyhad/pnPDz/8/
Here is the CSS:
#example {
width:800px;
height:220px;
display:block;
overflow:hidden;
margin:0 0 4em 0;
}
#example ul {
list-style:none;
margin:0;
}
#example li {
border-bottom:1px solid #fff;
}
#example h1 {
color:#000;
font-size:20px;
margin-bottom:5px;
}
#example a:link, #example a:visited {
color: #444;
display:block;
border-bottom:1px solid #666;
text-decoration:none;
padding: .3em .25em;
}
.links {
float:left;
width:615px;
margin:0;
padding:0;
}
.links ul {
margin:0;
padding:0;
}
#example .links li {
float:left;
margin 0 20px 0 0;
width:185px;
}
#example .links li:nth-last-child(2),
#example .links li:nth-last-child(3),
#example .links li:nth-last-child(2) a,
#example .links li:nth-last-child(3) a,
#example li:last-child,
#example li:last-child a {
border: 0;
}
And here is the HTML:
<section id="example">
<div class="links">
<h1>links</h1>
<ul>
<li>Example1</li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
<li>Example9</li>
<li>Example10</li>
<li>Example11</li>
<li>Example12</li>
<li>Example13</li>
<li>Example14</li>
<li>Example15</li>
<li>Example16</li>
<li>Example17</li>
<li>Example18</li>
</ul>
</div>
</section>
Each item on the list should be underlined separately, not as a continuous line.

Answer 1

do this: (update your #example li css to this)
#example li
{
border-bottom:1px solid #fff;
padding:5px;
margin:2px;
}
working fiddle
have a look at box model and mdn

Answer 2

Add a 5px space to the right of each item:
#example li {
margin-right:5px;
}