title: How can I set margin top/bottom to a li?
body: <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li {
    padding: 5px 4px 6px 7px;
    margin-top: 3px;
    margin-bottom: 3px;
    list-style: none;
  }
  li + li {
    border-top: 1px solid #eff0f1;
  }
  li:hover {
    background-color: #f7f8f8;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;something&lt;/li&gt;
    &lt;li&gt;something else&lt;/li&gt;
    &lt;li&gt;something else again&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you see, there isn't any white space in the top of those rows. In other word, <code>margin-top: 3px;</code> doesn't work. Why? And how can I fix it?</p>
  
  <hr>
  
  <p><strong>Current output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/VEfvS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VEfvS.png" alt="enter image description here"></a></p>
  
  <p><strong>Expected output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/4lgCs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4lgCs.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>Note:</strong> I can wrap everything which is into <code>&lt;li&gt;</code> to a <code>&lt;div&gt;</code>. And then set all those <code>li</code>'s properties to that <code>&lt;div&gt;</code>. But I want to know how can I do that with my current HTML structure?</p>