HTML&CSS

imgタグの下にできる謎の隙間を解決！！（html）

今回は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」だとベースライン分の隙間が発生してしまいます。
これを解決する２つの方法を記載致します。

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タグの謎の下の隙間を解決でした。
慣れてきてもいまだに、他の人が作成したサイトなどを弄っている際に、あれ？なんだこの隙間ってなることがあります。
そういった時はこれが原因だったりしますね（笑）

-HTML&CSS
-, ,