2月 02
こんにちは。
今日はWEBのお話です。
CSSを利用してWEB制作をしていると
たびたびその設定に頭を悩ませることがあります。
例えば今回のブログのタイトルように
画像を入れてレイアウトを組んだときにその画像の下に
なぜか隙間が生じる、というものです。
実際に隙間が生じている状態が下記の図です。
このように微妙に隙間があいてしまって
見た目上少し気になります。
調べてみるとよくIE（Internet Explorer）で見られる現象とのことです。
では実際の解決方法です。
IEで画像の下に隙間が生じてしまうのは
アルファベットの小文字のgやyなど
実際のベースラインより下にはみ出るこれらの文字を
表示するための隙間が
もともとIEで設定されているからです。
ですので画像の下にその隙間がでないようにするためには
次のようなCSSを組むことで解消されるはずです。
Img{
vertical-align:top;
}
実際にこのようにCSSを組むと、先ほどあった隙間がなくなり
下の図のようになります。
隙間がなくなりましたね。
もしご自身でWEB制作をする際に同じ現象になった場合は
参考になさってください♪
パソコンスクールISA 船橋校 並木孝輔
最近のコメント