画像の下に不要な余白が出るときの対処方法

こんにちは。島津です。
しばらく更新が滞ってしまいました！失礼致しました…

さて今回は、divやテーブルなどのブロック要素で画像を囲んだ際に
画像の下に不必要な余白が表示されてしまう場合の解消方法について
ご紹介しようと思います。

とりあえず実際の表示を見てみましょう。

▼スクリーンショット

※Windows IE7のものです。

（htmlコーディング）

<div>
　　<img src="sample.jpg" alt="" />
</div>
<div>
　　<img src="sample.jpg" alt="" /> abcdefg
</div>

（cssサンプル）

body {

font-size:40px;

}
div {

padding:0;
border:solid 1px #DDDDDD;

}
img {

margin:0;

}

divの内余白、imgタグの外余白とも0を指定しているはずなのに
画像の下に微妙な余白が出てしまっています。なぜでしょう？


そもそも、画像（imgタグ）はインライン要素ですので
サイズの大小に関わらず、テキストと同じように「行」の中に表示されます。
罫線付きノートに○や△を書き込むようなイメージです。

その際、画像のサイズが文字サイズと同じとは限らないので
画像を行の上端・下端どちらかに揃えて表示することになりますが、
何も指定しないと行の下端…ではなく、ベースラインに揃えられます。

ベースラインというのはこれです。
ローマ字と一緒に小学校で習った人も多いかと思います。

そんなわけで、ベースラインと行の下端の間分だけ余白が空くことになります。
HTML自体が元々英語を基準にしているので、仕方ないかと思いますが
画像を活用するレイアウトだと困ることもありますよね。

これを解消するには下記のように設定します。（方法は２通りあります。）
・行の高さを０にする方法
・画像の行揃えをテキストの下端にする方法

▼スクリーンショット

※Windows IE7のものです。

（htmlコーディング）

<div class="style01">
　　<img src="sample.jpg" alt="" />
</div>
<br />
<div class="style02">
　　<img src="sample.jpg" alt="" />
</div>
<br />
<div class="style02">
　　<img src="sample.jpg" alt="" /> abcdefg
</div>

（cssサンプル）

body {

font-size:40px;

}
div {

padding:0;
border:solid 1px #DDDDDD;

}
img {

margin:0;

}
div.style01 {

/* 行の高さを０にする */
font-size:1px;
line-height:0;

}
div.style02 img {

/* テキストの下端に揃える */
vertical-align:text-bottom;

}

どちらの方法でも対応可能ですが、画像と一緒にテキストも表示する場合は
行の高さを０にすると、文字がはみ出たりつぶれたりしてしまいますので、
vertical-alignで対応することになります。

また、vertical-alignのパラメータはtext-bottom以外にも色々あります。
文字と画像の大小によってベストな揃え位置も変わってくるので、
状況に応じてうまく使い分けてみましょう。

今回の記事は以上です。
ありがとうございました。