インライン要素に改行いれたら、予期せぬ空白が入ってしまった！

<span class="text">私が<span class="text--red">来た！！</span></span> こうした。 すると、表示が私が来た！！ から私が 来た！！になってしまった、、（テキストに空白が入ってデザイン崩れ） 改行によってホワイトスペースが生まれたことに気付かず 謎のホワイトスペースに翻弄された2021年春。 本記事は上記の事象がなぜ起きるのか？の調査まとめになります。 なぜそうなるの？ 上記の事象には２つの処理が関わってくることが分かりました。 1.CSSの空白処理 CSSでは、空白、タブ、改行は空白として解釈されます。そして、これはレンダリング時に適応されます。 これはwhite-spaceプロパティで制御されており、 white-space:normal が初期値（空白、タブ、改行は空白と解釈される）とされています。 ブラウザエンジンにはホワイトス

[dorapon2000]

“解釈を基にCSSの空白処理+インライン整形コンテキストを適応し、下記の順番でレンダリングします。”