title: PHP—Chrome adds space between <label> and <span>
body: <p>With Chrome, the browser adds a tiny space between the <code>&lt;label&gt;</code> and <code>&lt;span&gt;</code>, but only on some of the labels.</p>
  
  <p><a href="https://i.stack.imgur.com/M94Gx.png" rel="nofollow noreferrer">Chrome - Normal Label (Player 1)</a></p>
  
  <p><a href="https://i.stack.imgur.com/YbUlt.png" rel="nofollow noreferrer">Chrome - With Space (Player 7)</a></p>
  
  <p>With Mozilla Firefox, the browser does NOT render this behavior.</p>
  
  <p><a href="https://i.stack.imgur.com/SrqgV.png" rel="nofollow noreferrer">Firefox - Normal Label (Player 1)</a></p>
  
  <p><a href="https://i.stack.imgur.com/6wQFN.png" rel="nofollow noreferrer">Firefox - Normal Label (Player 7)</a></p>
  
  <p>I'm using <code>&lt;label&gt;</code> and <code>&lt;span&gt;</code> to differentiate the colors between PLAYER—# and the Player's Name.</p>
  
  <p>Both of these examples are coded the same way, and both of these methods produce the same results:</p>
  
  <p>1)</p>
  
  <pre><code>&lt;div class="card card-header rounded-0 pl-2 py-1"&gt;
    &lt;label class="players text-uppercase mb-0" for="player_7_text"&gt;PLAYER 7&amp;mdash;(&lt;span class='text-white'&gt;&lt;?php echo $player_7_title ?&gt;&lt;/span&gt;)&lt;/label&gt;
  &lt;/div&gt;&lt;!-- card-header --&gt;
  </code></pre>
  
  <p>2)</p>
  
  <pre><code>  // From PHP File
    $player_7_title = "PLAYER 7&amp;mdash;(&lt;span class='text-white'&gt;" .  $row_players['player_7'] . "&lt;/span&gt;)";
  
  &lt;div class="card card-header rounded-0 pl-2 py-1"&gt;
    &lt;label class="players text-uppercase mb-0" for="player_7_text"&gt;&lt;?php echo $player_7_title ?&gt;&lt;/label&gt;
  &lt;/div&gt;&lt;!-- card-header --&gt;
  </code></pre>
  
  <p>I checked the database entries for any extra spaces. I reviewed my HTML, including the Inspector Tool. I also tinkered with the PHP concatenation operators. No spaces.</p>
  
  <p>EDIT: I believe it has something to do with the em dash entity <code>&amp;mdash;</code>. I switched the em dash for the en dash <code>&amp;ndash;</code>, which fixes the issue. However, I would like to use <code>&amp;mdash;</code></p>