上の画像のように先頭行だけ開始位置がずれてる場所がありました
外部 CSS も読み込んでるのでそこで余計な text-indent が設定されてるのかなと思い devtools で探してみたのですが みつかりませんでした
それ以外に先頭行だけずれる原因に心当たりがなくて devtools で適当にスタイルを外したり付けたりしていたら原因がわかりました
inline 要素に margin がついてるせいでした
そんな変な挙動だったっけ……
とりあえず inline で margin 付いてる要素を inline-block にして対処
上の画像を再現するコード
<!DOCTYPE html>
<style>
.parent {
width: 200px;
background: #eee;
display: flex;
}
.child {
flex: 1 1 0;
}
.child+.child {
border-left: 1px solid #aaa;
}
a {
margin: 0 10px;
}
</style>
<div class="parent">
<div class="child">
<a>ああああああああああああああああ</a>
</div>
<div class="child">
<a>アアアアアア</a>
</div>
</div>