しばらく更新が滞ってしまいました!失礼致しました…
さて今回は、divやテーブルなどのブロック要素で画像を囲んだ際に
画像の下に不必要な余白が表示されてしまう場合の解消方法について
ご紹介しようと思います。
とりあえず実際の表示を見てみましょう。
▼スクリーンショット

※Windows IE7のものです。

※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;
}
画像の下に微妙な余白が出てしまっています。なぜでしょう?
そもそも、画像(imgタグ)はインライン要素ですので
サイズの大小に関わらず、テキストと同じように「行」の中に表示されます。
罫線付きノートに○や△を書き込むようなイメージです。
その際、画像のサイズが文字サイズと同じとは限らないので
画像を行の上端・下端どちらかに揃えて表示することになりますが、
何も指定しないと行の下端…ではなく、ベースラインに揃えられます。
ベースラインというのはこれです。
ローマ字と一緒に小学校で習った人も多いかと思います。

そんなわけで、ベースラインと行の下端の間分だけ余白が空くことになります。
HTML自体が元々英語を基準にしているので、仕方ないかと思いますが
画像を活用するレイアウトだと困ることもありますよね。
これを解消するには下記のように設定します。(方法は2通りあります。)
・行の高さを0にする方法
・画像の行揃えをテキストの下端にする方法
▼スクリーンショット

※Windows IE7のものです。

※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 {/* 行の高さを0にする */
}
font-size:1px;
line-height:0;
div.style02 img {/* テキストの下端に揃える */
}
vertical-align:text-bottom;
行の高さを0にすると、文字がはみ出たりつぶれたりしてしまいますので、
vertical-alignで対応することになります。
また、vertical-alignのパラメータはtext-bottom以外にも色々あります。
文字と画像の大小によってベストな揃え位置も変わってくるので、
状況に応じてうまく使い分けてみましょう。
今回の記事は以上です。
ありがとうございました。