img要素で指定した画像の下にできるスペース（

余計な余白ができる原因 画像（img要素）に対して余白ができる原因は、画像を含むインライン要素が、ベースラインに配置されているためです。

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

line-heightは行間が指定できるプロパティですが、文字の上下に行間をつくるため余白が作られます，。