【CSS】設定してないのに画像(img)の下にできる隙間を解決

htmlでheaderに画像(img要素)を配置してブラウザで確認すると、なぜか画像の下に隙間が空いていました。

普段は気づかないぐらい小さなスペースで、お恥かしながら私はずっと気づいていませんでした。。。しかし、画像とメニューバーをキッチリ下揃えするデザインに変更した際、「あれ？ズレてる」とようやく気づいたんです。

しかし、気づいた後が大変でした。この謎のスペース、cssでimg要素のmarginとpaddingを両方ともゼロに設定しても消せませんでした。

いろいろ調べてようやく消すことができたので、健忘録として書き残しておきます。

というわけで、今回は画像下の隙間をなくす方法をご紹介します。

  • 画像下の余白をなくすことができる
もくじ

画像(img)下にできる隙間をなくす

画像(img)下に隙間ができる原因

画像(img要素)に隙間ができるのは、cssのimg要素を含むインライン要素の初期値が「vertical-align: baseline;」であることが原因で起こります。vertical-alignの初期値baselineは、画像を含むインライン要素のベースラインを親要素のベースラインに揃えて配置します。ベースラインで揃えるので、ベースラインより下の部分の長さが親要素と子要素で異なる場合(親要素 ＞ 子要素)、子要素に「隙間」ができてしまうのです。

画像(img)下の隙間を解決する方法

この問題を解決するには、cssで隙間を無くしたいimg要素のvertical-alignにbaseline以外のものを指定します。例えば、class名「header-menu」配下のimg要素に指定する場合、

.header-menu img{
   vertical-align: bottom;
}

上記はbottomで指定しましたが、bottom以外のtopやmiddleなどを指定しても同じように隙間をなくすことが可能です。

CSS初期化のススメ

正直なところ、画像の下の隙間は不要なので、css初期化の一貫としてimg要素のvertical-alignをbaseline以外に指定しておくといいでしょう。例えば、

img{
   vertical-align: bottom;
}

これで、全てのimg要素の下にできてしまう隙間を無くすことができます。

まとめ

webデザインのためにコーディングをしていると、期待しないズレがよく起こります。今回もそうでしたが、多くの場合CSSの設定が原因です。CSSが原因だとわかっていても、そのズレの原因となっている部分を見つけ出すまでが大変だったりしますよね。特にデザイン上、親要素や子要素、子要素同士が入れ子になっている場合、構造が複雑になっている分、問題となっている部分を見つけるのが難しくなります。ですから、htmlやcssは、なるべくシンプルで、見やすい構造にすることをオススメします。