こんにちは、ゆんつです。
HTMLで、親要素の中に子要素としてimg要素を入れた時。
親要素にも子要素にもheightを設定しなければ、親要素と子要素の高さはピッタリ同じになるような気がします。
違うの？
でも実際にコードを書いてみると
See the Pen
inline by konpure (@yuntu)
on CodePen.
親要素の背景は解りやすいように青色にしています
ほんの少しですが、親要素のほうが子要素であるimg要素の高さよりも高いことが分かると思います。
これが、どんな問題を引き起こすかというと
その画像に続けて隙間なく縦にぴったりと次の要素を配置したい場合に、余計な空白が空いてしまいます。
このような場合に、親要素と子要素の画像の間に余計な空白を生じさせなくなるには、どうしたらよいでしょうか？
今日は
について書きたいと思います。
空白が生まれる原因
img要素はインライン要素です。
インライン要素はデフォルトではベースラインという線に揃う性質があります。
ベースラインとはテキストを入力した際に、そのテキストを揃えるための基準となる目には見えない下線です。
英語の小文字のテキストの場合ベースラインへの文字の揃い方はこんな感じになります。
アルファベット小文字のgやjやyなどはベースラインを突き抜けています。
gやjやyのベースラインを突き抜ける部分を「ディセンダ」と言います。
インライン要素を子要素にもつ親要素のheightは、子要素に何も設定しない場合、このディセンダまで考慮した高さになります。
つまり親要素とimg要素の間に生じる余計な空白の原因は、親要素がインライン要素であるimgのディセンダまで含めた高さになっているからなのです！
なるほどねぇ
余計な空白を無くす方法
空白を無くす方法は2つあります。
img要素にvertical-alignを設定する
CSSに、テキストや画像の垂直方向の位置を指定する「vertical-align」というプロパティがあります。
このプロパティを利用して
See the Pen
inline2 by konpure (@yuntu)
on CodePen.
画像が親要素の高さピッタリに収まりました
親要素と画像の高さを同じにする
画像の高さを調べて、親要素に画像と同じ高さのheightを設定しても、空白は無くなります。
See the Pen
inline3 by konpure (@yuntu)
on CodePen.
まとめ
というわけで、画像の謎の空白が出来た場合は
ことで余白が無くなります。
何かの参考になれば幸いです。
それでは、またー。
コメント