img に CSS :hover などで効果をかけたときに img の周囲にまで効果が
かかることがあります。
img タグ ( display: inline-block; の要素) を並べたときに上下・
左右に隙間ができる話と原因は同じです。

サンプル1 : (失敗) img の下側にも効果がかかる

下は img 上にマウスカーソルを移動すると :hover で効果をかける
サンプルです。img の下側にも赤い背景色が現れます。
img の vertical-align が関係しています。

サンプル2: 修正

a:hover ではなくて img:hover に対して装飾します。

参考: いろいろ

その1: font-size: 0; で img の下側の領域をなくす

img の親のブロック要素 (figure, p, divなど)の font-size を 0 に
すると img の下側の行間などの領域がなくなります。

その2: vertical-align: bottom; で img の下側の領域をなくす

img に vertical-align: bottom; を指定する img が下端に
揃います。これで img の下側の領域 (:hover で赤色になっていた領域)
がなくなります。

(2020/08-2024/04)
動作 : Edge120, Firefox120, Chrome119, IE11

◎ ノート

・CSS vertical-align が関係する要素
  display: inline; の要素 - テキスト、span, b など
  display: inline-block; の要素 - img など。

  参考: div, p, li などの要素は display: block; の要素です。