【ホームページ作成】画像と枠線の間に余白を設けられますか？

画像にスタイルシートで枠線を付ける場合

スタイルシートを使えば、画像を加工することなく画像に枠線を加えられます。 方法はとても簡単ですから、スタイルシートを少しでも使ったことのある方々なら、方法は簡単に思いつくでしょう。

では、画像と枠線との間に、少し余白を設けたい場合はどうでしょうか？
すぐにスタイルシートの記述方法を思いつきますか？

そこそこスタイルシートを活用しているなら、きっと思いつくでしょうね。paddingプロパティを使えば、内側の余白を調節できるはずだと。

ところが！
それでは、うまくいかない場合があります。 なんとも困ったことですが、現在最も普及率が高いと考えられるブラウザ「Internet Explorer」では、その方法ではうまくいかないことがあるのです。（最新の IE7.0 でも同様）

今回は、その対策をご紹介したいと思います。

画像に枠線を加えるスタイルシート

画像の周囲に枠線（緑色の実線で1ピクセル）を加えて、その枠線と画像との間に1ピクセルの余白を設けるスタイルシート…と聞いて思いつくのは、次のようなソース（スタイルシート）でしょう。

非常に簡単ですね。たったこれだけです。borderプロパティで枠線の太さ・線種・色を決定し、paddingプロパティで内側の余白サイズを決定しています。 これだけで問題ない…はずなのですが、そうはいかない場合があるのです。

IEの互換モードだと画像の内側の空間が作れない

答えから言ってしまうと、Internet Explorerでは、「互換モード」で解釈（描画）されている場合に限って、 画像（＝img要素）の内側の余白（＝padding）が無視されてしまいます。
※IE6.0以降には、HTMLの記述方法によって、標準モードと互換モードの2種類のレンダリング（描画）モードが用意されています。

以下の画像を見て下さい。320×240ピクセルの画像の周囲に、1ピクセルの実線を引いています。 枠線と画像の間には1ピクセルの余白を設けるようスタイルを記述しています。（＝上記に示したスタイルシートのソースそのまま）
果たして、枠線と画像との間に1ピクセルの余白があるように見えるでしょうか？

今、この記事が掲載されているページが、果たして「標準モード」で解釈されているのか「互換モード」で解釈されているか分からないので、 以下に、両方のサンプルページを用意しました。以下のページをInternet Explorerで表示させて比較してみて下さい。

• 互換モードで表示されるページ
• 標準モードで表示されるページ

枠線が画像にぴったりくっついていると、画像が濃い色の場合は、枠線がほとんど見えません。 枠線の効果を出すには、1ピクセル程度の余白がある方が望ましいですね。
以下は、IEとFirefoxで表示させた場合の上記画像（キャプチャ画像）です。比較してみて下さい。

（左）互換モードでのIE ／ （右）Firefox

では、Internet Explorerでもうまく表示させるにはどうすればよいでしょうか？
その方法は、次のページで！

枠線と画像の間に余白をうまく設ける方法は？ >>