white-space: pre-wrapの奇妙な挙動にハマってしまう

自分のサイトで掲示板を使っている。

掲示板は文章が長くなるので、出力させる際に改行なども反映させたいことから、CSSで「white-space: pre-wrap」を指定していた。

しかし、これをやると1行目になぜかインデントのような空白が入ってしまう。

解決策を調べてみると、なんとHTMLの記述が影響しているとのこと。white-spaceを指定したあとに改行するとそれが影響するらしい。

white-spaceでpre-wrapをつけたら先頭がずれてしまったの時の対処方法 - ララテック

white-spaceでpre-wrapをつけたら先頭に余白ができてしまったの時の対処方法についてまとめました。

poppotennis.com

たしかに私は、white-space: pre-wrapを指定した後に改行してタブで1段下げていた。

こんなのホンマに関係あるのかいなと思いながら修正してみると

直った。

CSSの挙動は未だによくわからない。