WEB制作

【CSS】画像の下にある隙間を無くす方法 vartical-aline :bottom

スポンサーリンク

ノート

この記事を見ている方はおそらく、
img要素を設置した時、画像の下の余白を消せず、レイアウト調整に困ってしまっているのではないでしょうか。

なぜなら、これはpaddingやmargindをゼロにしても消えないからです。

解決方法は簡単です

img{
vartical-aline :bottom(baseline以外ならOKです。)
}

たったこれだです。

簡単でしょ?

 

実際に困ったケース

でも画像の下の余白を消すときって、一体どんな時でしょうか。

私はこんな時に困りました。

 

画像拡大のとき

画像をhoverした時、画像の大きさを変えず拡大させたい時です。

画像の大きさを変えない設定をしたのに、なぜか下方向にだけ画像が伸びるように拡大されてしまいます。

このとき、vartical-aline を設定し、解決しました。

 

ロゴとテキストの高さを揃えたいとき

Web制作において、ロゴ(image)とテキストを横並びにする機会は多々あると思います。

ですが、双方の高さが合いません。

そんな時、vartical-alineを設定すると高さを合わせることができます。

 

みなさんも画像の下の余白に困ったら是非試してください。

 

こちらのサイトでわかりやすく書かれております。

https://arts-factory.net/img-vertical-align/

スポンサーリンク

-WEB制作
-, , , , ,

© 2023 WEBセンス Powered by AFFINGER5