【html】インライン要素内の画像に発生する余白を除去する

vertical-align: bottom

インライン要素内に記述したimg要素で表示された画像は、デフォルトではテキストのbaselineに合わせて整列されます。

HTML

<p><img src="image.png"></p>

CSS

p {
  background-color: #CCCCCC;
}

レンダリング結果

そのため、画像のみをインライン要素に含めると、画像下部分に隙間ができてしまいます。

これを解消するためには、img要素にvertical-align: bottomを設定します。

CSS

p {
  background-color: #CCCCCC;
}
img {
      vertical-align: bottom;
}

これによって、img要素がインライン要素の下端に合わせられ、隙間がなくなります。

参考文献

作りながら学ぶ HTML/CSSデザインの教科書