リスト（inline-block）の改行には注意

今回トップページとマイページにタブメニューを追加し、より見やすくしました。
その時にどちらもソースコードはおなじなのに、タブの両サイドのスペースが明らかに違う…ということがありました。

原因は「display:inline-block;」が指定されていたことです。

inline-blockはソースコード前後の改行を含むスペースを認識してしまうので、
今回のように丁寧にわかりやすく書いたソースコードだと逆にそれがスペースの原因となってしまいます。

<ul>
    <li><a href="#">xxxxxxx</a></li>
    <li><a href="#">xxxxxxx</a></li>
    <li><a href="#">xxxxxxx</a></li>
    <li><a href="#">xxxxxxx</a></li>
    <li><a href="#">xxxxxxx</a></li>
</ul>

このようにインデントが入っていると間違いなくばらつきがでます。
リストで不思議なスペースができてしまっていた時はCSSだけではなくコード側の見直しも検討してみてください。