display: inline-block で配置した隣接要素の空白を消す方法

結論

親要素に font-size: 0; を指定して子要素に(任意の値) font-size: xxx; を指定するだけ。

css

ul {
  font-size: 0;
}

li {
  font-size: 1rem;
}

参考の画像とデモ

よくあること

• htmlを生で記述していないので li を詰めれない
  • slimとかだと困る
    • タグに対して <> で詰めきれない
• margin とかで詰めるとブラウザ毎に何か違う

なんかしらこういうのがあると思います。

こういう時に便利

下記みたいなことしなくて良くなるので、記述が綺麗になるぞ！

html

<ul>
  <li>a</li><li>b</li><li>c</li>
</ul>

<ul>
  <li>a</li><!--
  --><li>b</li><!--
  --><li>c</li>
</ul>

というお話だったのさ

役に立つかは不明