PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のスキルアップサイトです

岐阜のパソコン教室「パソコンスクール・テルン」

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>

上記のように画像を配置してみると画像の下に謎の(?)隙間が発生します。
こんな感じに↓・・・
kiji1

この余分な隙間を消すには、imgに下記のスタイルを追加してあげると・・・

img{ vertical-align:bottom; }

kiji2

めでたく余分な隙間が消えました。