画像の下にできる余白を消す方法

  1. acky.infoホーム
  2. デザインのヒント
  3. CSSテクニック
  4. 画像の下にできる余白を消す方法

画像の下にできる余白を消す方法の概要です

img要素にvertical-align:bottom;を指定すると、画像の下にできる余白を消すことができます。
画像一つ一つにクラスを指定するのは手間がかかるので、すべての画像に適応されるように
img{vertical-align:bottom;}
をサイトのすべてのページで読みこむCSSに書きましょう。
すべての画像に適応させても表示が崩れることはめったにありません。

まとめ!

  • img要素にvertical-align:bottom;を指定
広告

HTML・CSSとデモページ

HTMLコード

<div>
	<img src="img_1.png"><br>
	<img src="img_2.png">
</div>
<div>
	<img src="img_1.png" class="img"><br>
	<img src="img_2.png" class="img">
</div>

CSSコード

.img{
	vertical-align:bottom;
}
div{
	background:#CCC;
}

【問題】画像の下に余白ができる

HTMLコード

<div>
	<img src="img_1.png"><br>
	<img src="img_2.png">
</div>

CSSコード

div{
	background:#CCC;
}

画像にvertical-align:baseline;(初期値)が指定されているときは、画像の下にpaddingやmarginでは消すことができない余白ができます。
余白ができるので画像と画像を縦にすき間なく並べることができません。
デモページでは見た目で余白がわかるように2行目のように背景色もつけました。※余白のできないブラウザもあります。

【解決】画像の下の余白を消す方法

HTML・CSSと方法

HTMLコード

<div>
	<img src="img_1.png" class="img"><br>
	<img src="img_2.png" class="img">
</div>

CSSコード

.img{
	vertical-align:bottom;
}
div{
	background:#CCC;
}

画像の下に余白ができるときは、2行目のように
vertical-align:bottom;
を指定して画像の垂直の位置を調整すると、画像の下の余白を消すことができます。
デモページでは見た目で余白がわかるように5行目のように背景色もつけました。

vertical-align:bottom;だけでなくvertical-align:top;vertical-align:middle;などでも画像の下の余白を消すことができます。

まとめ

img要素にvertical-align:bottom;を指定すると、画像の下にできる余白を消すことができます。
画像一つ一つにクラスを指定するのは手間がかかるので、すべての画像に適応されるように
img{vertical-align:bottom;}
をサイトのすべてのページで読みこむCSSに書きましょう。
すべての画像に適応させても表示が崩れることはめったにありません。

最後まで読んでいただき、ありがとうございました。

広告
最新のEdge、Internet Explorer、Firefox、Chromeできれいにページを見ることができます。