wordpressで文字列を編集したときに勝手に間が開いたりしたときの対処法

はじめに

趣味でwordpressテーマを作っている中学生プログラマーです。
デザインをしているときに、文字列を変えただけで作ったはずのデザインが崩れていることが多々あります。
なんで?
と思ったので、調べてみました。

原因は、ヤツだ。

そう、みなさんご存知、文字実体参照記号です。
&と;で挟まれた謎の文字、みたことありませんか?

<ul>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <li>ぽへぽへ</li>
    <li>ぽへぽへ</li>
</ul>

このように、wordpressのエディターで編集をしていると入ってしまうことがあるようです。

<ul>
    <li>ぽへぽへ</li>
    <li>ぽへぽへ</li>
</ul>

また、一見問題がなくても

<ul>
□□□□<li>ぽへぽへ</li>
□□□□<li>ぽへぽへ</li>
</ul>

この□の部分がスペースになっちゃってることも...

まとめと対処法

もし、自分のデザインに心当たりがない表示崩れが起こっている時は、
Shift+Tabキーでインデントをなくしてから、（以下参照）

<ul>
<li>ぽへぽへ</li>
<li>ぽへぽへ</li>
</ul>

もう一度Tabキーでインデントをつけてあげてください。

<ul>
    <li>ぽへぽへ</li>
    <li>ぽへぽへ</li>
</ul>

以上。