display: inline-block:で指定した要素同士を横並びにすると、要素の間に謎の空白が生まれます。
デザインではこの隙間をピッタリ埋めるように指示されている時にこういうズレが起きると地味に手間がかかります。
どちらかにclassを当てて無理やり、水平方向にmarginをマイナスに当てたり、floatで浮かせて無理やり詰めるなどの力技でもなんとかなりそうですが、こういうボタン系はすでにfloatで浮かせて左右に寄せてたりするので、二重にfloatするのもいまいち美しくないです。
しかし、実はこの問題はHTML間に余白ができていることで生じる問題なので、ほんの一言書き足す、または要素間を完全に横並びにすることで問題が解決します。
まず解決策①
隙間が出ている要素間に以下のようにコメントアウトをつける。
コメントアウト化することで見えない余白を消せます。
解決策②
隙間が出ている要素間をびっしり詰める。
上記のいずれかの方法を実践すれば、隙間が見事に消えます。
解決策が２つありますが、要素が２つ以上並ぶ際に隙間をびっしり埋めるとコードが横に間延びするので、個人的にはコメントアウトする方がコードがすっきりして見やすくなると思います。
めちゃくちゃニッチな問題ですが、誰かの参考になれば。
そろそろ新しい技術を身に着けなきゃな…という方は思い切って働く環境を変えてみるのも良いかもしれません。
自身の学びたい言語やフレームワークを伝えることで、最適な企業を一緒に見つけてくれるTech Stars Agentに相談してみるのがおすすめです。
現役エンジニアのエージェントが多数所属しているので、深く相談できるのが嬉しいポイントです。