ある要素の子要素にimg要素を使用した場合に下部に余白が発生する

ある要素の子要素にimg要素を使用した場合に下部に余白が出てしまう現象が発生することがあります。

【HTML】

<p><img src="img/sample.jpg" width="100" height="100" alt="" /></p>

【CSS】

p { background-color:#d00; }

この現象はimg要素がインライン要素でvertical-align:baseline;がデフォルトで設定されていることで起きますが、以下の方法で解消することができます。

• img要素にdisplay:block;を指定する。
• img要素にvertical-align:top;またはvertical-align:bottom;を指定する。
• img要素の親要素にfont-size:0;とline-height:0;をを指定する。

img要素にdisplay:block;を指定する

img { display:block; }

img要素にvertical-align:top;またはvertical-align:bottom;を指定する

img { vertical-align:top; /* またはvertical-align:bottom; */ }

img要素の親要素にfont-size:0;とline-height:0;をを指定する

ただし、こちらは文字の大きさを0とするのでお勧めしません。

p { font-size:0; line-height:0; }