I'm currently working on a project that requires wrapping each character of a sentence in a span element. This is necessary so I can accurately measure the distance from the beginning of the sentence to each individual character.
However, I've encountered an issue where wrapping certain characters (particularly "Y" and "T") in a span element adds extra margin to the right, causing the text to stretch:
div { font-size: 100px; }<h2>Expected (uniform 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 (varying 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>When running the snippet, you'll notice that "Y-Y-Y-Y" becomes significantly wider when enclosed within spans.
What causes this discrepancy? And how can I prevent this unintended stretching?