img要素で指定した画像の下にできるスペース（余白）を簡単に詰める方法
img要素として画像を配置して、marginやpaddingを0に指定しているのにも関わらず画像の下に余計なスペース（空行みたいなもの）が表示されてしまう。ブラウザのデバッグモードでも原因がわからないいし、改行や空白を消しても解消されません。今回は簡単になおせる方法を紹介しています。
余計な余白ができる原因
画像（img要素）に対して余白ができる原因は、画像を含むインライン要素が、ベースラインに配置されているためです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
<style>
*{
margin : 0;
padding: 0;}
.wrapper{
background-color:purple ;}
p{
background-color:lime ;
height:150px;}
</style>
</head>
<body>
<div class="wrapper">
<img src="./img/car.png" alt="">
</div>
<p>P要素</p>
</body>
</html>
imgを含むインライン要素（インラインブロックも含む）の初期値は「vertical-align: baseline;」が指定されており、そのことがこの隙間ができる原因となっています。
解決方法1（推奨方法）
vertical-alignにbaseline以外のものを指定することで解決します。
img{
vertical-align:top;
}サンプルは「top」で指定しましたが、「middle」や「bottom」などを指定しても問題ありません。
画像の下の余白は、ハマる原因でもあるので、imgの「vertical-align」の指定はかならずしておくことをお勧めします。
HTMLに画像を配置する場合は、それら見越してtop, middle, bottomどのパターンを主に使うか考慮してimgに事前に「vertical-align」の指定をしておくと思わぬことで時間を使わなくて良いかもしれません。
解決方法2
img要素にブロック要素に指定するCSSを記述する
img {
display: block;
}vertical-align: baselineの説明
vertical-alignは、行内やセル内の縦方向の揃え位置（ベースライン）を調整できるプロパティです。何も指定しない場合は、baselineが設定されます。また、ブロック要素には使用できません。img要素は、インライン要素になります。baselineは、line-heightと関係があります。line-heightは行間が指定できるプロパティですが、文字の上下に行間をつくるため余白が作られます。そのため、baseline上に配置された画像の下に余計な空白が生まれてしまいます。