css - CSS の組み合わせ: 文字間隔と回転を適用すると、スパンがポップアップ表示されます

Question

div があり、その中にスパンがあり、その内容は 1 文字で構成されています

<div class="container">
    <div class="content">
        Set 4
        <div id="letterbox" class="letters"> 
            <span class="spanset4" id="item13">M</span>
            <span class="spanset4" id="item14">N</span>
            <span class="spanset4" id="item15">O</span>
            <span class="spanset4" id="item16">P</span>
        </div>
    </div>
</div>

回転や文字間隔を適用するだけでも問題ないように見えます

回転と文字間隔の両方を適用すると、適用されるスパンが押し上げられたように見えます。

結果はこの JSFiddleで見ることができます

この他のバージョンの JSFiddle に見られるように、パディングで修正できます

しかし、スパンが押し上げられないように CSS の組み合わせを適用する方法はありますか?