inline-block要素の横並びでできる隙間をなくす方法

displayプロパティでinline-block要素にすると、marginを0にしても、横に隙間ができてしまいます。

See the Pen inline-block by KUBO (@KUBOGEN) on CodePen.

これは改行が原因で起こるそうで、この問題を解決する方法はいくつかあります。

HTMLの改行削除もしくはコメントアウトを記述

さっきの例では、HTMLに記述しているタグを改行していましたが、そのタグを詰めて書くと隙間もなくなります。

HTML
<ul>
　<li>list1</li>
　<li>list2</li>
　<li>list3</li>
　<li>list4</li>
　<li>list5</li>
</ul>

HTML
<ul>
<li>list1</li><li>list2</li><li>list3</li><li>list4</li><li>list5</li>
</ul>

もしくは、タグの間にコメントアウトタグを記述しても隙間がなくなります。

HTML
<ul>
　<li>list1</li><!–
–><li>list2</li><!–
–><li>list3</li><!–
–><li>list4</li><!–
–><li>list5</li>
</ul>

個人的にはあまりいい方法とは思えないんですが、閉じタグを消すという方法もあります。

HTML
<ul>
　<li>list1</li
　<li>list2</li
　<li>list3</li
　<li>list4</li
　<li>list5</li
</ul>

ここからは、CSSでinline-block要素の隙間をなくす方法です。

まず親要素にfont-sizeプロパティで「0」を指定して、対象の要素にfont-sizeプロパティで任意の値を指定します。

CSS
ul {
　padding: 0;
　font-size: 0;
}
li {
　display: inline-block;
　border: 1px solid #aaa;
　padding: 10px;
　font-size: 14px;
}

しかしこの方法だと、フォントサイズをpxなどの絶対値で指定するとうまくいくのですが、emとか%などの相対的な指定をするとうまくいきません。

親要素にletter-spacingプロパティで適当なマイナスの値を指定して、対象の要素にletter-spacingプロパティで「normal」を指定します。

CSS
ul {
　padding: 0;
　letter-spacing: -1em;
}
li {
　display: inline-block;
　border: 1px solid #aaa;
　padding: 10px;
　letter-spacing: normal;
}

inline-blockの代わりにtable-cellを指定する方法もあります。

CSS
ul {
　padding: 0;
}
li {
　//display: inline-block;
　display: table-cell;
　border: 1px solid #aaa;
　padding: 10px;
}

単純にfloatプロパティで「left」を指定する方法もありますね。

CSS
ul {
　padding: 0;
}
li {
　display: inline-block;
　border: 1px solid #aaa;
　padding: 10px;
　float: left;
}