In meinem aktuellen Projekt muss ich jedes einzelne Zeichen eines Satzes in einen Bereich einschließen, damit ich den Abstand vom Satzanfang bis zum betreffenden Zeichen messen kann.

Leider scheint es, dass die Verpackungetwa der Zeichen (ich fand es wahr für "Y" und "T") in einem Bereich, fügt einen zusätzlichen Rand rechts hinzu, so dass der gesamte Text gestreckt wird:

div { font-size: 100px; }

<h2>Expected (same width):</h2>
<div>A-A-A-A</div>
<div>
  <span>A</span><span>-</span><span>A</span><span>-</span><span>A</span><span>-</span><span>A</span>
</div>

<h2>Unexpected (different width):</h2>
<div>Y-Y-Y-Y</div>
<div>
  <span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span><span>-</span><span>Y</span>
</div>

Wenn Sie das Snippet ausführen, werden Sie feststellen, dass "Y-Y-Y-Y" in SPANs deutlich breiter ist.

Warum ist das so? Wie kann ich dieses Verhalten verhindern?