「余白を0にしているのに、なぜか数ピクセル空く」。CSSでいちばん不気味なつまずきです。オカルトではなく、ちゃんとした理由があります。

原因1：インライン要素の間の改行

span や img、inline-block にした要素を並べたとき、要素の間に4pxほどの隙間ができることがあります。これはHTMLの改行やインデントが、半角スペース1文字として表示されているためです。

文章の中では、単語と単語の間に空白が必要です。ブラウザはインライン要素の間の改行も、その空白と同じように扱います。仕様どおりの動きです。

CODE改行が空白になるコードを書き換えると、すぐ下で動きます

HTMLで、box を横に並べて改行を消す（1行に詰めて書く）と隙間が消えます。試してみてください。

根本的な解決は、Flexboxを使うことです。親に display: flex を書くと、この空白は発生しません。いまは無理に inline-block で並べる必要がないので、これが最短の対処です。

原因2：画像の下の隙間

img を div で囲むと、画像の下に3〜5pxの隙間ができます。これも同じ理屈で、img がインライン要素だからです。文字の下端（ベースライン）に合わせて配置されるため、アルファベットの g や y が下に伸びるぶんの空間が確保されます。

img に display: block を指定すれば消えます。vertical-align: bottom でも消えます。どちらでも構いません。

原因3：ブラウザの初期スタイル

何も指定していなくても、ブラウザは最初からいくつかのスタイルを当てています。body に余白があるのも、h1 や p の上下に余白があるのも、ul に左の余白があるのもそのためです。

「書いていないのに余白がある」の多くはこれです。書いていないから0、ではありません。

CODE初期状態でも余白はあるコードを書き換えると、すぐ下で動きます

上は初期状態のまま。下は margin: 0 で打ち消しています。同じ内容でも間隔が違います。

最初に打ち消しておく

毎回悩まないために、CSSの先頭で初期スタイルを揃えてしまうのが定番です。数行で済みます。

style.css の先頭
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

これを書いておくと、「書いていない余白」に悩まされることがなくなります。そのぶん、必要な余白は自分で書くことになりますが、そのほうが結果的に見通しが良くなります。

隙間の正体を確かめる方法

検証ツールで要素を選ぶと、margin がオレンジ、padding が緑で表示されます。どちらの色も付いていないのに空いているなら、それはインライン要素の空白か、行の高さ（line-height）によるものです。色を見るだけで、原因が2択まで絞れます。