経緯

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

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

原因

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

<ul class="column-list">
  <li><img src="hoge.png" alt="hoge" /></li>
  <li><img src="hoge.png" alt="hoge" /></li>
  <li><img src="hoge.png" alt="hoge" /></li>
  <li><img src="hoge.png" alt="hoge" /></li>
  <li><img src="hoge.png" alt="hoge" /></li>
  <li><img src="hoge.png" alt="hoge" /></li>
  <li><img src="hoge.png" alt="hoge" /></li>
</ul>

.column-list>li{
  width: 25%; /* 100% / 4 */
  padding: 10px;
  display: inline-block;
}

.column-list>li{
  width: 100%;
}

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

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

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

<ul class="column-list"><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li><li><img src="hoge.png" alt="hoge" /></li>
</ul>

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

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

解決策

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

.column-list>li{
  width: 25%; /* 100% / 4 */
  padding: 10px;
  float: left; /* ここを修正 */
  display: block; /* ここを修正 */
}

.column-list>li{
  width: 100%;
}

まとめ

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