Tips

display: inline-block;を指定した要素同士の隙間を埋める方法

displayinlineblock

display: inline-block:で指定した要素同士を横並びにすると、要素の間に謎の空白が生まれます。

inline block 隙間

デザインではこの隙間をピッタリ埋めるように指示されている時にこういうズレが起きると地味に手間がかかります。

どちらかにclassを当てて無理やり、水平方向にmarginをマイナスに当てたり、floatで浮かせて無理やり詰めるなどの力技でもなんとかなりそうですが、こういうボタン系はすでにfloatで浮かせて左右に寄せてたりするので、二重にfloatするのもいまいち美しくないです。

しかし、実はこの問題はHTML間に余白ができていることで生じる問題なので、ほんの一言書き足す、または要素間を完全に横並びにすることで問題が解決します。

まず解決策①

隙間が出ている要素間に以下のようにコメントアウトをつける。

インラインブロック隙間解決法

コメントアウト化することで見えない余白を消せます。

解決策②

隙間が出ている要素間をびっしり詰める。

横並びに書く

上記のいずれかの方法を実践すれば、隙間が見事に消えます。

display inlineblock 隙間なし

 

解決策が2つありますが、要素が2つ以上並ぶ際に隙間をびっしり埋めるとコードが横に間延びするので、個人的にはコメントアウトする方がコードがすっきりして見やすくなると思います。

めちゃくちゃニッチな問題ですが、誰かの参考になれば。