display: inline-block 行の中で箱の寸法を持つ

行の流れには乗りつつ、幅・高さ・余白を箱として持たせたい場合に使います。タグ、小さめのボタン、ロゴと文言を同じ行に置く、といった用途でよく出ます。

外側の描画です。親の文字と同じ行に並びます。width / height / 四辺の margin と padding が効きます。行の中での上下位置は vertical-align の影響を受けます。baseline のままだと、隣の文字や箱と底が揃わず、少し上下にずれて見えることがあります。

内側の描画です。中身は通常のブロックに近く、テキスト寄せは text-align です。子を等間隔の列にする力はありません。複数をきれいに並べて折り返す場合は、親の flex と flex-wrap の方が間隔を揃えやすいです。

デザインを再現するときの影響です。HTMLソースの改行やスペースが、箱と箱のあいだに隙間として出ることがあります。カンプどおりの隙間にならないときは、その空白か、margin の重なりを疑います。ページ全体の段組みを inline-block だけで組むと、高さ揃えや折り返しの調整が増えやすいです。

関連：display / inline / flex