How do I add space between li's in following situation? - css

Question

Given below is my scss
#import "susy";
$susy: (
columns: 12,
gutters: 0,
math: fluid,
output: float,
gutter-position: inside
);
ul {
list-style: none;
width: 240px;
}
li {
display: table-cell;
position: relative;
vertical-align: middle;
width: 60px;
height: 60px;
border-radius: 50%;
color: #019ed5;
border: 1px solid #019ed5;
background-color: white;
cursor: pointer;
text-align: center;
#include span(3);
&:nth-child(4n){
#include span(3 at 10);
}
}
li:hover {
background: #019ed5;
color: #fff;
}
span.detail{
position: relative;
top: 12px;
left: 8px;
}
span.more {
position: relative;
float: right;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
font-size: 10px;
line-height: 20px;
color: white;
}
And here is my HTML
<ul>
<li>
<span class="more">25</span>
<span class = "detail">Jan<br/>15</span>
</li>
<li>
<span class="more-statement">15</span>
<span class="detail">Feb<br/>15</span>
</li>
<li>
<span class="more">13</span>
<span class="detail">Mar<br/>15</span>
</li>
<li>
<span class="more-statement">8</span>
<span class="detail">Apr<br/>15</span>
</li>
<li>
<span class="more">30</span>
<span class="detail">May<br/>15 </span>
</li>
<li>
<span class="more">6</span>
<span class="detail">Jun<br/>15</span>
</li>
<li>
<span class="more">9</span>
<span class="detail">Jul<br/>15</span>
</li>
<li>
<span class="more">16</span>
<span class="detail">Aug<br/>1</span>
</li>
<li>
<span class="more">0</span>
<span class="detail">Sep<br/>15</span>
</li>
<li>
<span class="more">15</span>
<span class="detail">Oct<br/>15</span>
</li>
<li>
<span class="more">30</span>
<span class="detail">Nov<br/>15</span>
</li>
<li>
<span class="more">21</span>
<span class="detail">Dec<br/>15</span>
</li>
</ul>
http://codepen.io/suhasdeshpande/pen/bVwZmz?editors=110
Above is my codepen and I am really new to Sussy. Having an hard time figuring about how to add spaces between lis in above code.