title: Unwanted margin in inline-block list items
body: <p>I have the following HTML:</p>
  
  <pre><code>    &lt;ul&gt;
          &lt;li&gt;
          &lt;div&gt;first&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;div&gt;first&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;div&gt;first&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;div&gt;first&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>and the following css rules:</p>
  
  <pre class="lang-css prettyprint-override"><code>        ul {
              padding: 0;
              border: solid 1px #000;
          }
          li {
              display:inline-block;
              padding: 10px;
              width: 114px;
              border: solid 1px #f00;
              margin: 0;
          }
  
          li div {
              background-color: #000;
              width: 114px;
              height: 114px;
              color: #fff;
              font-size: 18px;
          }
  </code></pre>
  
  <p>For some strange reason, the list items appear with a margin around them in both Firefox and Chrome. Looking at firebug, the list items do not have any margin at all, but there seems to be a void space between them.</p>
  
  <p>If I later on add more list items via javascript using </p>
  
  <pre><code>$('&lt;li&gt;&lt;div&gt;added via js&lt;/div&gt;&lt;/li&gt;').appendTo($('ul'));
  </code></pre>
  
  <p>the "margin" doesn't appear around the new elements:</p>
  
  <p><img src="https://i.stack.imgur.com/1s8Eo.jpg" alt="Unwanted margins"></p>
  
  <p>Any idea of what the hell's happening here?</p>