株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

【CSS】imgタグを囲ったblock要素の下に余白ができたとき【chrome】

2015.11.6(Fri) 20:21 | CSS | oshima

こんばんは。
DIVの中にIMGタグをぽんとひとつ置いた構成のとき、
Chromeだと下に5pxくらいのの余白が生まれます。

これを解消する方法を紹介します。

環境

GoogleChrome

再現

単純な構成なのですが以下のようなHTMLで再現します。

<div class="imgWrap">
  <img src="hoge.png" />
</div>

こんな感じにするとimgWrapクラスの下に5px程の余白ができます。

対応方法

cssでimgタグにstyleを当ててあげましょう。

.imgWrap img {
  display:block;
}

又は

.imgWrap img {
  vertical-align:top;
}

これですっきり解消します。