title: How to remove the space between two <span> tags?
body: <p>I have a list of spans. In the HTML file, it is nice to list these <code>&lt;span&gt;</code> tags in different lines for readability and maintenance as follows:</p>
  
  <pre><code>&lt;span&gt;&lt;a href="some link"&gt;A link&lt;/a&gt;&lt;/span&gt;
  &lt;span&gt;&lt;a href="some link"&gt;A link&lt;/a&gt;&lt;/span&gt;
  &lt;span&gt;&lt;a href="some link"&gt;A link&lt;/a&gt;&lt;/span&gt;
  &lt;span&gt;&lt;a href="some link"&gt;A link&lt;/a&gt;&lt;/span&gt;
  &lt;span&gt;&lt;a href="some link"&gt;A link&lt;/a&gt;&lt;/span&gt;
  </code></pre>
  
  <p>However, these create a space between these <code>&lt;span&gt;</code> tags. I am wondering if there is any CSS or other way to remove this space between two <code>&lt;span&gt;</code> tags without putting all above spans in one line without any space in between?</p>
  
  <p>Note that we assume that the above html structure cannot change.</p>
  
  <p>Thanks and regards.</p>
  
  <p><strong>-------- UPDATE ------------</strong></p>
  
  <p>After reading dfsq's solution and other related posts, I feel there is no perfect answer. It really <strong>depends on the specific need</strong>. dfsq's solution is clever and should work but get things over complicated. </p>
  
  <p>What I have regarding the specific need is having a border between two spans and the space between the border and span should be the same. For my particular need, I found the two acceptable solutions too:</p>
  
  <ol>
  <li><p>Use CSS to float span</p></li>
  <li><p>Add an extra space as follows: <code>&lt;span&gt;&lt;a href="some link"&gt;A link&lt;/a&gt;&amp;nbsp;&lt;/span&gt;</code></p></li>
  </ol>
  
  <p>Hope this helps.</p>