横並びのときに高さがずれる問題の解決方法【inline-block】

要素を横並びにするときに、今だとdisplay:flexが主流かなと思います。
でも、他にも要素を横並びにする方法はあって、その1つにinline-blockを使って横並びにする方法があります。

でも、inline-blockを使って横並びにすると1つぶつかる問題があって、それが高さがずれる問題です。
こちらみてみてください！

このように、高さがずれてしまうんですよね。
これの原因がinline-blockのvertical-alignの初期値がbase-lineだからです。

なので、高さを調節するためには、vertical-align: top;を指定すると高さがそろってくれます。

See the Pen inline-block by TakahiroOkada (@okalog) on CodePen.