結論
- Firefoxの開発者ツールからInspectorをチェック
whitespaceと書かれてる箇所が無いかを探す- 開発者ツール上でそれを消してみて、サイトのレイアウトに影響があるかどうかを確認する
読まなくて良い話
ウェブサイトが意図しない崩れ方をしているときに、開発者ツール上で以下を指定して原因を探すことがよくあります。
* { outline: 1px solid; }
それを利用して、全角スペースが紛れてないかチェックできないかと思いましたがうまくいきません。他にも、文字に対して適用できるCSSプロパティを試しましたがどれもうまくいかず。（具体的には、text-shadowやbackground-colorを試した）謎の余白を、明確に全角スペースだと断定するのにCSSを活用しようとしましたが結局失敗に終わりました。Firefoxの開発者ツールはとても便利だと再認識するにいたります。
しかしながら、displayの値をinlineにすると、全角スペースのところだけ確実に1文字分余白が開くのでそれはちょっとありかなと思います。実際に試してみましたが、outlineプロパティと併用することで効果がありそうな手応えがありました。でも、それならInspector上でwhitespaceを探した方が早いので多分今後は使いません。
MDNに、今回紹介したwhitespaceがどういうものなのかを紹介する文章があります。スペースが、レイアウトに影響するときのみwhitespaceという表記がInspector上で確認できるそうで、それに基づいて全角スペースもwhitespaceと表示されるみたいです。
余談ですが、フォントによっては全角スペースに文字が割り当てられているものがあります。自分が使っているCicaもその一種です。手間無く全角スペースの位置がわかるので便利です。慣れるまで違和感はありますが…。
