既存コードの修正をしている際、あるコンポーネントの文字が不自然に左によっている現象に遭遇しました。
原因を調査したところ、思わぬところに仕掛けられていたtext-indentが犯人でした。
現象
以下のようなテキストを含むコンポーネントがあり、文字が不自然に左に寄っていました：
<div class="title">テストタイトル</div>
原因
スタイルを確認したところ、以下のようなtext-indentが設定されていました：
.title {
text-indent: 20px; /* これが原因でした */
}
text-indentは段落の最初の行のインデント（字下げ）を指定するプロパティです。
負の値を設定すると、逆に左方向にインデントが発生します。
解決方法
不要なtext-indentプロパティを削除することで、正常な表示に戻りました：
.title {
/* text-indent: 20px; を削除 */
}
教訓
- レイアウトが崩れている場合、
marginやpaddingだけでなく、text-indentの設定も確認する - 特に負の値の
text-indentは意図しない表示ズレの原因になりやすい - コードレビュー時は、こういった見落としやすいプロパティの使用にも注意を払う
まとめ
思わぬところに仕掛けられていたtext-indentプロパティによって文字が左によっていた問題を解決できました。
CSSのデバッグでは、よく使用するプロパティだけでなく、text-indentのような見落としがちなプロパティにも注意を払うことが重要だと実感しました。
これで20分くらい沼ってました😭