《注》この記事はAIに生成させたものです

みなさん、こんな経験ありませんか？

<p style="line-height: 1.5;">
  <img src="cat1.jpg" alt="猫1" width="200">
  <img src="cat2.jpg" alt="猫2" width="200">
  <img src="cat3.jpg" alt="猫3" width="200">
</p>

↑これだけで画像の下に謎の隙間ができてしまう…！

原因（超ざっくり）

<img>はインライン要素なので、文字と同じように「ベースライン」に合わせようとします。
line-height: 1.5 のときに、小文字の「p」や「y」が下に伸びる分のスペースを確保してしまう → 隙間誕生！

最強の解決法（これだけ覚えて！）

p img {
    vertical-align: bottom;   /* ← これだけで完璧！ */
}

top や middle でもOKですが、bottom が一番確実に隙間ゼロになります。

その他の方法（比較表）

方法 コード例 メリット デメリット
vertical-align（おすすめ） vertical-align: bottom; 簡単・確実・インラインのまま ほぼなし
line-height: 0 p { line-height: 0; } 簡単 テキストが入ると行間が潰れる
font-size: 0 p { font-size: 0; } 昔からある定番 少し強引
Flexbox p { display: flex; flex-direction: column; } モダンで自由度高い 古いブラウザ非対応

結論：ほとんどの場合は vertical-align: bottom; で十分！

これで一生この隙間で悩まなくて済みます♪
お疲れ様でした！