HTML・CSS ? 画像の下の隙間を消す
2021年5月28日<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<style>
*{
margin:0;
padding:0;
}
div{
background:#ccccff;
}
</style>
<body>
<div>
<img src=”sky.jpg” alt=”空の写真” width=”400″>
←画像の下に隙間ができる
</div>
</body>
</html>
上記のように画像を配置してみると画像の下に謎の(?)隙間が発生します。
こんな感じに↓・・・
この余分な隙間を消すには、imgに下記のスタイルを追加してあげると・・・
img{ vertical-align:bottom; }
めでたく余分な隙間が消えました。