(つくば:カエル)

2008年10月09日

at 11:30
posted by @
comments(0)

IEで画像の下に意図しないマージン(余白)が出る

たまには技術的なことも…笑汗


marginもpaddingも指定していない画像に
IEで画像の下に5pxくらいの意図しない余白が出ることがあります。

数枚の画像を縦に並べる時などは隙間が空いてしまうので、デザインに支障をきたします。

現象としては以下のような感じです。
※わかりやすいようにちょっと大きめに余白を表示してます。

IEで画像の下に意図しないマージン(余白)が出る
余白は以下のようなスタイルを指定することで消えます。

img {vertical-align: bottom;}

ただ、ブログなどで上記のスタイルを追加してしまうと、
ブログでは多様している方が多い、
画像の横に文字を回り込ませるimgタグにalign="left"やalign="right"などで
1行しか回り込まなくなってしまいまうので、

h1タグの中の画像なら以下のようなスタイルを指定してください。

h1 img {vertical-align: bottom;}



同じカテゴリー(XHTML+CSS)の記事画像
IEでiframeのボーダーが消えない
Firefoxで携帯サイトをシミュレートするアドオン
Windows版Safariでテキストエリアのリサイズが可能
IE6でネガティブマージンを指定した画像
styleswitcher.jsでスタイルシート切り替え
テーブル右端のwidth指定
同じカテゴリー(XHTML+CSS)の記事
 IEでiframeのボーダーが消えない (2009-07-17 21:00)
 スタイルシートでボックスを中央に配置 (2009-07-07 21:00)
 スタイルシートでボックスを画面中央に配置 (2009-05-19 21:00)
 Firefoxで携帯サイトをシミュレートするアドオン (2008-10-31 15:44)
 JavaScriptがいらないGoogleマップ API (2008-06-02 12:15)
 Shift_JISのページでGoogle マップ API (2008-05-23 12:05)


(つくば:カエル)

comments form

名前:
メール:
URL:
コメント: