title: How to remove margin and padding from css table
body: <p>I want to remove the spacing between the 2 rows.
  The table is a css only table. </p>
  
  <p>JS Fiddle: <a href="https://jsfiddle.net/n841wvwn/" rel="nofollow noreferrer">https://jsfiddle.net/n841wvwn/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>* {
      padding: 0px;
      margin: 0px;
  }
  
  div.table {
      display: table;
      border-collapse: collapse;
      table-layout:fixed;
  }
  
  div.tr {
      display: table-row;
  }
  
  div.td {
      display: table-cell;
      padding:0; margin:0;
  }
  
  .button {
      width: 88px;
      height: 55px;
      border: none;
      margin: 0px;
      padding: 0px;
  }
  
  
  
  #ac {
      background-image: url('http://i.imgur.com/u9znwQK.png');
      background-size: 100%;
  }
  
  #ce {
      background-image: url('http://i.imgur.com/azae5uQ.png');
      background-size: 100%;
  }
  
  #multiplication {
      background-image: url('http://i.imgur.com/veBf82o.png');
      background-size: 100%;
  }
  
  
  #division {
      background-image: url('http://i.imgur.com/i6KcXGr.png');
      background-size: 100%;
  }
  
  
  #number7 {
      background-image: url('http://i.imgur.com/0GixHJ5.png');
      background-size: 100%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="table" id="calculator"&gt;
              &lt;div class="tr"&gt;
                  &lt;div class="td" id="display"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tr"&gt;
                  &lt;div class="td"&gt;
                      &lt;button class="button" id="ac"&gt;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="td"&gt;
                      &lt;button class="button" id="ce"&gt;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="td"&gt;
                      &lt;button class="button" id="division"&gt;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="td"&gt;
                      &lt;button class="button" id="multiplication"&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tr"&gt;
                  &lt;div class="td"&gt;
                      &lt;button class="button" id="number7"&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Between this circle I want no spacing. <a href="https://i.imgur.com/a3wMyLA.png" rel="nofollow noreferrer">http://i.imgur.com/a3wMyLA.png</a></p>
  
  <p>The layout is based on a table div, which has table-layout fixed and display table. Also I have border-collapse set to collapse and every padding and margin to 0px. </p>
  
  <p>For some reason the button is 55 px but the  div is 59 pixel in height.</p>