title: How to add margin between list items with Foundation 5?
body: <p>I have a list of items, 4 per row, each item is a gray rectangle with text in it. Problem: these items touch each other and I want space between them. Apparently some SASS variable can be changed but it sounds complex and there's no way I do anything complex to achieve something so elemental. Is there some simple solution to my problem?</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class='row'&gt;
      &lt;ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4"&gt; 
          &lt;li id='home_li_computing'&gt;text1&lt;/li&gt; 
          &lt;li id='home_li_field'&gt;text2&lt;/li&gt; 
          &lt;li id='home_li_thinking'&gt;text3&lt;/li&gt; 
          &lt;li id='home_li_guide'&gt;text4&lt;/li&gt; 
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>li {
      border: 1px solid #ddd;
      background-color: #eee;
  }
  </code></pre>