title: The same style rules applied to div and li tags gives different results
body: <p><em>test.html</em>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div, li {
    display: inline-block;
    margin-left: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;тест1&lt;/div&gt;
  
  &lt;ul&gt;
    &lt;li&gt;тест&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Opening test.html gives such a result that although div and li tags share the same style rules, div tag content is nevertheless closer to the left screen border than li tag's (at least at Google Chrome 44, desktop). Why is it so and how is it "healed"?</p>