経緯

display: inline-block;を指定するとあたかもinlineでの表示のように振る舞いながら、heightや上下のpaddingを指定することができてすごく便利です。

4列のデータ一覧を作りたいとき、これを使うとレイアウトが崩れてしまったので、そのメモ書き。

原因

HTML/CSSは以下のようなもの。

こうのようなHTML/CSSのとき、上手く4列になりません。

デベロッパーツールで確認すると、li同士の間に妙な隙間があるのがわかると思います。
これは実は、半角スペースが間に入ってしまっていることが原因です。

HTMLでは改行や連続する半角スペースは1つの半角スペースとして解釈されることになっています。
そのため、

のように改行なしで書いてしまえば、正しく表示されます。

一方で、こんな書き方では、いくらなんでも可読性が低すぎます。

解決策

ちゃんとdisplay: block;を使ってやりましょう。

まとめ

便利なものには罠がある。