【初心者WEBデザイナー必見】画像の下に謎の余白ができちゃう問題を解決！
こんにちは！WEBデザイナーのこたです。
サイトを作成する手順は、デザイン➡︎コーディングとなりますよね。
デザインでpx単位で揃えたのはいいけど、コーディングの際になんかうまく揃わないとかありませんか？
特にimg画像を置く際に謎の余白があってpxをうまく揃えられないなんてことも…
そんな問題を解決する方法をご紹介いたします。
新米WEBデザイナーにとって引っかかりやすいポイントとなるため、覚えておくと今後役に立つはずです。
画像の下に余白ができるとは？
イメージで言うとこんなかんじ
|
1 2 3 |
<div class="test"> <img src="test.jpg" /> </div> |
|
1 2 3 4 5 6 7 8 9 |
div{ background: #eee; text-align: center; } img{ margin: 0; padding: 0; } |
paddingもmarginも0のはずなのに謎の余白ができてしまう。
本当は下にぴったりくっつけたいのに…
そう、これが謎の余白問題です！
解決策は三つの方法がある
- (1)font-size:0;line-height 0;
- (2)vertical-align: bottom;
- (3)display:block;(inline-block)
font-size:0;line-height 0;
|
1 2 3 4 5 6 7 8 9 10 11 |
div{ background: #eee; font-size: 0; line-height: 0; text-align: center; } img{ margin: 0; padding: 0; } |
vertical-align: bottom;
|
1 2 3 4 5 6 7 8 9 10 |
div{ background: #eee; text-align: center; } img{ margin: 0; padding: 0; vertical-align: bottom; } |
display:block;(inline-block)
|
1 2 3 4 5 6 7 8 9 |
div{ background: #eee; } img{ display: block; margin: 0 auto; padding: 0; } |
必要ケースに合わせて使い分けてください。
個人的には(1)がデザインの形が崩れにくいので、使用しています。
まとめ
img要素に謎の余白ができる原因は「インライン要素」なため、ベースラインに合わせられ下が空いてしまうのです。
この様な基礎知識もやはり必要だなと改めて感じれた良い機会でした。
ぜひ、同じ問題に当たった場合は上記の３つのどれかを試してみてください。
