横並びのレイアウトを作るためにinline-blockを利用してはいけない

経緯

display: inline-block;を指定するとあたかもinlineでの表示のように振る舞いながら、heightや上下のpaddingを指定することができてすごく便利です。
4列のデータ一覧を作りたいとき、これを使うとレイアウトが崩れてしまったので、そのメモ書き。

不具合がおきるサンプル

以下がサンプルです。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 {
  width: 100%;
}
.column-list>li{
  width: 25%; /* 100% / 4 */
  padding: 10px;
  display: inline-block;
}

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

原因

デベロッパーツールで確認すると、li同士の間に妙な隙間があるのがわかると思います。実は、半角スペースが間に入ってしまっていることが原因です。
HTMLでは連続する改行や半角スペースは1つの半角スペースとして解釈されることになっています。
そのため、

<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: flex;display: block;を使ってやりましょう。

display: flexを使った場合

.column-list {
  width: 100%;
  display: flex; /* ここを追記 */
}
.column-list > li {
  width: 25%; /* 100% / 4 */
  padding: 10px;
}

display: blockを使った場合

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

まとめ

今はflexがあるので、便利ですね。