title: White space between table cells
body: <p>I have a list with multiple  links in it. I want them to display next to each other with a coloured background and some white space between them.</p>
  
  <p>First I had "display:inline-block;" but then I couldn't give the link a vertical align. So I found out that I had to make the display a table-cell but now I don't have white space because I have a coloured background.</p>
  
  <p>I have used padding but this didn't gave me white space. This is my code with fiddle:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="frontpage-menu"&gt;
      &lt;ul class="button"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Diensten&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Projecten&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#frontpage-menu {
      width: 1000px;
      display: block;
      height: 50px;
  }
  
  .button li {
      display: table-cell;
      background-color: #4A4A2F;
      width: 200px;
      height: 65px;
      text-align: center;
      vertical-align: middle;
  }
  
  .button li&gt;a {
      text-decoration: none;
      font-size: 40pt;
      color: #FFFFFF;
      letter-spacing: -4px;
  }
  </code></pre>
  
  <p>This is my fiddle: <a href="http://jsfiddle.net/0L7275dq/" rel="nofollow">http://jsfiddle.net/0L7275dq/</a></p>