画像や動画の下に意図しない余白ができたら、インライン要素である可能性を疑え！
画像を表示すると、画像の下に余白が現れることがあります。
これはimgタグがインライン要素であることが原因です。
この観点から画像下の余白を消す方法を検証してみたのでご紹介します。
【基本コード】画像や動画下の余白をCSSで消しちゃおう
HTML
<div class="img-wrap">
<img src="●●●●" alt="●●●●" class="img">
</div>
<div class="movie-wrap">
<video src="●●●●" class="video"></video>
</div>SCSS
.img-wrap{
.img{
vertical-align: bottom;
}
}
.movie-wrap{
.video{
vertical-align: bottom;
}
}【Point】画像や動画下の余白をCSSで消しちゃおう
- インライン要素の下に余白ができる原因は
vertical-alignの規定値にある vertical-alignの値にbottomを指定しよう
【解説】画像や動画下の余白をCSSで消しちゃおう
インライン要素に指定されている初期値が影響している
インライン要素には初期値として、 vertical-align: baseline; が指定されています。
「baseline」を大まかに言うと「親要素の上のほう」です。
子要素が親要素内の上部に位置するように、デフォルトで指定されているんですね。
であれば、これを「下」に位置するように変更してやれば余白がなくなりそうです。
ということでimg要素に対して下記のとおり指定します。
.img-wrap{
.img{
vertical-align: bottom;
}
}はい、カンタンですね。これで画像下の余白がなくなります！
videoタグで生じる下の余白にも有効
また今回の方法は、videoタグで表示させた動画にも応用できます。
というのも、videoタグもインライン要素だからです。
動画って容量も大きいし扱いも画像より複雑なので、ブロック要素っぽい気がしませんか？
（恥ずかしながら、私は長年ブロック要素だと思ってました）
コーディングをしていると、認識違いで足元をすくわれることがよくあります。
もし要素の下に余白ができるケースに遭遇したときは、
「こいつ…さてはインライン要素だな？」
と疑ってみてください！
他の対処法
インライン要素の既定値が原因で要素下の余白は生まれます。
ということは、imgタグをブロック要素にすることでも余白を無くすことができるんです。
例としては下記のような方法があります。
imgタグをブロック要素に変更する- フレックスボックスに変更する
/* 1. imgタグをブロック要素に変更する */
.img-wrap{
.img{
display: block;
}
}
/* 2. フレックスボックスに変更する */
.img-wrap{
display: flex;
}私が試したところ、これらの方法でも余白を消すことが出来ました。
もしvertical-alignの指定を変更しても余白が消えなかった場合は、
こちらの方法も試してみてください。
【まとめ】画像や動画下の余白をCSSで消しちゃおう
画像の下に余白が生まれる原因は、
インライン要素の初期設定にありました。
ということは今回の対応策は、imgタグ以外のインライン要素にも効果があるということです。
もし「意図していない余白」が現れたなら
「このタグ…実はインライン要素なんじゃないか？」
と疑ってみてください！
以上です！
少しでもお役に立てたら嬉しいです。
Comments