title: CSS remove gap between the text and list-style-image
body: <p>For my <code>ul</code> list items I added a picture using <code>list-style-image</code> property.</p>
  
  <p>example what I have: <strong><a href="https://jsfiddle.net/9qnmxpjh/" rel="nofollow">JSFiddle</a></strong></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>ul {
    list-style-image: url('http://placehold.it/50x40');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;Coffee&lt;/li&gt;
    &lt;li&gt;Tea&lt;/li&gt;
    &lt;li&gt;Coca Cola&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like my text (<em>e.g.</em> "Coffee") within the <code>li</code> items to touch the pictures - have no gap between the list item image and its description.</p>