今回はWeb制作の初心者が必ず遭遇するコーディングの悩み。
imgタグの下に謎の隙間ができる件について対処法を記載致します。
imgタグの下に隙間?
皆さんはimgタグの下に謎の隙間ができたって経験ありませんか?
例として下記の画像を見てください。
隙間が分かりやすいように赤の背景を設定しています。
<p class="img">
<img src="img.jpg" alt="">
</p>
<style>
.img {
width:300px;
background-color: red;
}
.img img {
width:100%;
}
</style>
なぜ画像の下に隙間ができるのか?
結論から申し上げますと、imgタグは初期値ではインライン要素です。
そのインライン要素では「vertical-align」プロパティの初期値が「baseline」になっていることが原因です。
「baseline」だとベースライン分の隙間が発生してしまいます。
これを解決する2つの方法を記載致します。
vertical-alignの値を変更する
一つ目は「vertical-align」プロパティの値を「middle」や「bottom」などに変更することです。
これで隙間がなくなります。
.img img {
vertical-align: middle;
}
imgタグをblock要素に変更する
imgタグをblock要素に変更する方法です。
inline要素でなくなるので、「vertical-align」プロパティは無効になります。
個人的にはリセットCSSなどに記入してblock要素にするのがおすすめです。
そうすればいちいち「vertical-align」など気にしなくてもよくなります。
img {
display: block;
}
まとめ
以上 imgタグの謎の下の隙間を解決でした。
慣れてきてもいまだに、他の人が作成したサイトなどを弄っている際に、あれ?なんだこの隙間ってなることがあります。
そういった時はこれが原因だったりしますね(笑)