inline-blockで横並びにしたらカラム落ちしてしまった!簡単な解決法をご紹介!

Pocket

こんにちは。
ジーニアスウェブの米田です。

コーディング初心者にとって、要素の横並びはつまずくポイントの1つではないでしょうか。
実際自分もそのひとりです。

レスポンシブ化が必須になってきている今、可変対応できるものでないとなりません。
今回はinline-blockで横並びにした際、カラム落ちしてしまう現象についてご紹介します。

 

なぜカラム落ちしてしまうのか


今回はこのリスト要素をinline-blockにして横並びにしたい。
li要素にdisplay:inline-blockとwidth:33.333%を指定。

ところが、、、、

カラム落ちしている!!

今回は余白なしのレイアウトだから分かりやすいが、
余白を指定していると気づきにくい。

なぜこのような余白ができてしまうのか。

実はこの改行が半角スペース分として、余白ができてしまうのです。
これはやっかいですね。

簡単な解決策をご紹介します。

1.記述方を変える


これなら余白はできませんが、少し不恰好。。。

2.親要素のfont-sizeを0にしてしまう


親要素のfont-sizeを0にし、子要素で再度font-sizeを指定することで、余白を消すことができます。
ただfont-sizeを%指定したい場合、この方法は使えません。

3.親要素の文字間を詰める


これならfont-sizeが100%でも問題ありません。

これで無事、カラム落ちせず横並びにすることができました。

最後に


横並びは簡単そうにみえて奥が深いです。
他にもfloatやflexboxなどを使いこなすことができれば、
自由自在にレイアウトすることができるようになるでしょう。