画像の高さと親要素の高さが一致せず、空白が出来る時は

こんにちは、ゆんつです。

HTMLで親要素の中に子要素としてimg要素を入れた時。

親要素にも子要素にもheightを設定しなければ、親要素と子要素の高さはピッタリになるはずだと思っていました。

ゆんつ

違うの？

でも実際にコードを書いてみると

See the Pen LagKZW by konpure (@yuntu) on CodePen.0

親要素の背景は解りやすいように青色にしています。

ほんの少しですが、親要素のほうが子要素であるimg要素の高さよりも高いことが分かると思います。

これがどんな問題を引き起こすかというと

その画像に続けて隙間なく縦にぴったりと次の要素を配置したい場合に、余計な空白が空いてしまいます。

親要素に画像のサイズにピッタリ合うheightを設定すれば空白は無くなりますが、heightを設定しなくてもピッタリにしたいのです。

この余白を無くす方法が分かったので、書き残しておきます。

余白が生まれる原因

img要素はインライン要素です。

インライン要素はデフォルトではベースラインという線に揃う性質があります。

ベースラインとはテキストを入力した際に、そのテキストを揃えるための基準となる目には見えない下線です。

英語の小文字のテキストの場合ベースラインへの文字の揃い方はこんな感じになります。

アルファベット小文字のgやjやyなどはベースラインを突き抜けています。

gやjやyのベースラインを突き抜ける部分を「ディセンダ」と言います。

インライン要素を子要素にもつ親要素のheightは、子要素に何も設定しない場合、このディセンダまで考慮した高さになります。

先ほども書きましたがimg要素はインライン要素ですのでデフォルトではベースラインに揃うようになっています。

そして親要素はディセンダを考慮するので、結果的に空白が生まれるのです。

ゆんつ

なるほどねぇ

余白を無くす方法

余白を無くす方法はとっても簡単です。

img要素に対して、vertical-alignを設定し、デフォルトではbaselineになっている値をtop,middle,bottomのいずれかにすれば良いだけです。

See the Pen inline2 by konpure (@yuntu) on CodePen.0

ゆんつ

画像が親要素の高さピッタリに収まりました

というわけで、画像の下に謎の空白が出来た場合は

ことで余白が無くなるかもしれません。

それでは、またー。