title: Using margin with display table-cell
body: <p>I have try adding margin-left/margin-right in li but it doesn't give them a space in between. What should I add to make a space in between the list ? </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.btn-top {
      float: right;
      height: 40px;
      margin-right: 10px;
      margin-top: 10px;
  }
  .btn-top ul {
       height: 100%;
       padding: 0;
  }
  .btn-top ul li {
      list-style-type: none;
      display: table-cell;
      width: 100px;
      height: 30px;
      vertical-align: middle;
      text-align: center;
      border-style: solid;
      border-color: #333;
      border-width: 2px;
      border-radius: 10px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="btn-top"&gt;&lt;ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;&lt;span class="btn" =&gt;btn1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li style="width:150px"&gt;&lt;a href="#"&gt;&lt;span class="btn"&gt;btn2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>