画像(インライン要素)の下に微妙な隙間があるとき

画像(インライン要素)の下に微妙な隙間があるとき

単純な話だけど、たびたびアレっ?てなるので忘備録。

<img src="画像ファイル">
<img src="画像ファイル"> 

たとえば、こんなかんじで画像を上下に2つ並べるとする。

marginやpaddingなどが入っていないのに、なぜか微妙な隙間が空いてしまうことがある。

原因はvertical-align。
インライン要素の場合、デフォルトでvertcal-align: baseline;となっていることが多いので、
vertical-align: top; としてあげると直る。

もしくは、画像自体をdisplay: block;でブロック要素にしてあげても直る。