2019.03.24こんにちは、ゆんつです。HTMLで親要素の中に子要素としてimg要素を入れた時。親要素にも子要素にもheightを設定しなければ、親要素と子要素の高さはピッタリになるはずだと思っていました。CodePen.0親要素の背景は解りやすいように青色にしています。ほんの少しですが、親要素のほうが子要素であるimg要素の高さよりも高いことが分かると思います。これがどんな問題を引き起こすかというとその画像に続けて隙間なく縦にぴったりと次の要素を配置したい場合に、余計な空白が空いてしまいます。親要素に画像のサイズにピッタリ合うheightを設定すれば空白は無くなりますが、heightを設定しなくてもピッタリにしたいのです。この余白を無くす方法が分かったので、書き残しておきます。余白が生まれる原因img要素はインライン要素です。インライン要素はデフォルトではベースラインという線に揃う性質があります。ベースラインとはテキストを入力した際に、そのテキストを揃えるための基準となる目には見えない下線です。英語の小文字のテキストの場合ベースラインへの文字の揃い方はこんな感じになります。アルファベット小文字のgやjやyなどはベースラインを突き抜けています。gやjやyのベースラインを突き抜ける部分を「ディセンダ」と言います。インライン要素を子要素にもつ親要素のheightは、子要素に何も設定しない場合、このディセンダまで考慮した高さになります。先ほども書きましたがimg要素はインライン要素ですのでデフォルトではベースラインに揃うようになっています。親要素はディセンダを考慮するので、結果的に空白が生まれるのです。余白を無くす方法はとっても簡単です。img要素に対して、vertical-alignを設定し、デフォルトではbaselineになっている値をtop,middle,bottomのいずれかにすれば良いだけです。CodePen.0ゆんつ画像が親要素の高さピッタリに収まりましたというわけで、画像の下に謎の空白が出来た場合はimg要素に対してvertical-alignを設定し、その値にはtop,middle,bottomのいずれかを指定することで余白が無くなるかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。プロフィールこっそりゆんつ山口県在住です。Reserved.メニューHOMEプロフィールお問い合わせホーム検索トップサイドバープロフィールこっそりゆんつ山口県在住です。(17)エックスサーバーで。