inline-block要素を複数並べてwidth100%にすると二段になる原因

inline-block要素を並べると…

ホームページをデザインしているときに二つ以上の要素を横一列に並べたいときってけっこうな頻度であると思います。

cssで行うには4つほどやり方があります。

1. display:tableとtable-cellを使用
2. floatを使用
3. display:flexを使用
4. display:inline-blockを使用

それぞれ一長一短があるのですが一番カンタンなのが4番目のdisplayプロパティにinline-blockを指定する方法。でもinline-blockで要素を横並びにして、かつ要素の幅（width）の合計を100%したとき、なぜか一行に収まらず最後の要素が二段目になっちゃう現象が発生します。

この現象の原因と対策を紹介しますね。

1. inline-block要素を並べると…
2. 原因はinline-blockの隙間
3. そもそもなんでinline-block間に隙間ができるの？
4. 対策：letter-spacingで対策！
5. inline-blockとwidth100%のお話：まとめ

原因はinline-blockの隙間

inline-blockをdisplayプロパティに指定すると実はinline-blockを指定した要素の間に少し隙間ができるんです。この隙間こそがwidthを100%にしたときに一行に収まらず二段目に要素が押し出されてしまう原因となっています。

widthの合計を100%にしていてもその間に計算外の隙間が入ってきたら100%をオーバーしちゃいますもんね。

なのでこの要素間の隙間をなんとかしてなくしてあげればいいワケです。

そもそもなんでinline-block間に隙間ができるの？

そもそもなんぜinline-block間に隙間ができちゃうのでしょうか。これはhtml内の改行コードが悪さをしています。

改行が文字として表示されるのでその部分が隙間になってしまうんですね。百聞は一見にしかず、少し見てみましょう。まずは各要素間に改行がある場合からです。<li>それぞれがinline-blockになっているとしてみてくださいね。

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

では次に<li>をhtml上で改行せずに並べてみます。こんな感じ。

code>
<ul>
<li></li><li></li><li></li><li></li>
</ul>

見事隙間がなくなってピンクの要素もちゃんと一列目にぴったり収まってくれていますね！

対策：letter-spacingで対策！

とはいってもhtmlをわざわざ修正するのはのちのちhtmlを見るときにシンドイですし、できればcssで何とかしたいものですよね。というコトで対策に移りますね。対策にはletter-spacingを使います。letter-spacingは文字と文字の間の間隔を設定するプロパティですがマイナスの値を入れるコトで文字同士をくっつけるコトができます。そうするコトで改行でできた隙間を強制的に埋めちゃいます。

<ul style="letter-spacing:-0.4em;">
	<li style="letter-spacing:normal;"></li>
	<li style="letter-spacing:normal;"></li>
	<li style="letter-spacing:normal;"></li>
	<li style="letter-spacing:normal;"></li>
</ul>

注意点としてはinline-block要素（今回だと<li>ですね。）の外側（今回だと<ul>です。）でletter-spacingにマイナスの値を設定しています。これで改行の隙間がなくなります。

でもこのままだと<li>内の文字もくっついちゃうのでちゃんとletter-spacing:normalを指定してあげて文字の隙間を元に戻してあげます。

inline-blockとwidth100%のお話：まとめ

今回はinline-blockを横並びにして、かつ要素の幅（width）の合計を100%にしたとき、どうしても一行に収まりきらずに二列目にあふれちゃう問題の原因と対策を紹介しました。

inline-blockはもっともカンタンに要素を横並びにできる方法ですがこんな風にキレイに並べようとするとひと手間が必要になるんですね。

今回はletter-spacingを使って隙間を埋めましたが、font-sizeでも同じことができます（改行の文字サイズを0にしてあげることで隙間を埋める）。ただfont-sizeはemや%で指定することも多いのでいったん0にしてしまうと、その後かなりメンドウなコトになりますので、特にこだわりがなければletter-spacingを使う方法がおすすめです。