CSS WEB制作

画像の下の余白を無くすにはvartical-aline :bottom

ノート

今の記事を見てくださっている方は、img要素を設置したとき、画像の下の余白を消せず困っていることでしょう。

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

 

でも安心してください。

vartical-alineを設定すれば秒で解決します。

 

解決コード

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

たったこれだけです。

簡単でしょ?

 

 

実際に困ったケース

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

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

 

画像拡大のとき

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

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

 

このとき、画像の下の余白の分だけ画像が伸びていたんですね。

 

vartical-aline: bottom を設定し、解決しました。

 

まとめ

みなさんも画像の下の余白に困ったら vartical-aline: bottom です。

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

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

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5