【CSS】画像(img)タグに謎の隙間ができてしまう解決方法

こんなことが起きました…

マージンもパディングも指定していないのに、どうして画像の下にどうして隙間が生まれる?
この原因はcssでした。

【解決】imgに指定されているcss「vertical-align」

結果から言うと画像に対して「vertical-align: baseline;」が指定されていることが問題でした。
多くの場合はreset.cssなどを読み込んだ際にimgに対して「vertical-align: top;」などが指定されるため、通常のサイトのコーディングのフローでは発生しにくい現象でした。

今回、一からサイトをコーディングをしている際にこういった初歩的なスタイルの崩れが発生し解決するのに少し時間がかかってしまったのでここで共有させていただきました。

問題の現象の再現

codepenでその現象を再現したのでどのような崩れか是非確認してみてください。