title: Line break displayed in ul li
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/4969082/unwanted-margin-in-inline-block-list-items">Unwanted margin in inline-block list items</a><br>
    <a href="https://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html">How to remove “Invisible space” from HTML</a>  </p>
  </blockquote>
  
  
  
  <p>I have an <code>&lt;ul&gt;</code> with multiple <code>&lt;li&gt;</code> children.</p>
  
  <p>The <code>li</code>'s just contain an image, and I removed all the margin from them.
  I also called <code>display:inline-block;</code> on them, so they are now displayed in one line.</p>
  
  <p>However, there is still a small margin on the right side of the <code>li</code>s.
  I found out that it's the line break, and that, if I remove it the margin disappear.
  However, it's very unreadable if I have to remove all the line breaks.</p>
  
  <p>Can you give me a solution for this one?</p>
  
  <hr>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;ul&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image1.png" alt="post_heart" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image2.png" alt="post_repeat" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image3.png" alt="post_tag" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="image4.png" alt="post_share" /&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <hr>
  
  <h2>LESS</h2>
  
  <pre><code>ul {
      display:inline;
      padding:none;
      margin:none;
  
      li {
          display:inline-block;
  
          padding:none;
          margin:none;
  
          a {
              display:block;  
              margin:none;
              border-right: 1px solid #e0e1e2;
  
              &amp;:hover {
                  .linearGradient(transparent, rgba(0,0,0,0.05));
              }
          }
  
          &amp;:last-child {
              a {
                  border:none;
              }
          }
      }
  }
  </code></pre>