【CSS】画像の下に出る謎の余白の対処法
株式会社トミックス
HTMLで画像を表示させた際に、意図せず妙な余白が出てしまうことがあります。
下の例を見てみましょう。
padding は全方位に 20px を指定してありますが、下の余白だけ明らかに広く取られています。
<div class="container" style="padding: 20px; background-color: #333;">
<img src="../img/example.jpg" alt="image">
</div>
これは img タグがインライン要素という、文字と同じ要素として扱われるために起こります。
文字として扱われるため、line-height の値と同じ分の余白が取られます。
解決方法
解決方法は至って簡単で、いくつかのパターンがあります。
要件に合わせて選び、対処していきましょう。
1. 親要素の font-size を0にする方法
.container {
font-size: 0;
}
2. 親要素の line-height を1にする方法
.container {
line-height: 1;
}
3. img タグ自体をブロックレベル要素にする方法
img {
display: block;
}
まとめ
個人的には１、もしくは2の方法が使いやすいかと思います。
当然ながら、同じ要素内のテキストも影響を受けてしまうため、使う際は img タグだけを内包する要素に指定するようにしましょう。
今回ご紹介した事象は、主にインライン要素に起こる事象ではありますが、CSSで display: inline-block; を指定した際にも同じ事象が起こります。
ブロックレベル要素とインライン要素の使い分けは初心者が躓きがちなポイントなので、しっかり抑えておきたいですね。
株式会社トミックス