関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
画像の表示・活用 (HTML,CSS,JavaScript)
更新日:2006年06月09日
背景色を付けたボックス内に画像を配置した場合など、画像の下側に謎の余白が現れることがあります。この余白は、なぜ現れるのでしょうか。また、この余白をなくすには、どうすればよいでしょうか?
「行の中での縦方向の位置」を指定するための vertical-align というプロパティを使えば、 下図のように、画像がベースラインではなく下端に揃えられるようになります。

画像がdiv要素の中にある場合は、次のようにスタイルを記述します。
もし、div要素ではなくh1要素の中にある場合には、次のように記述します。
上記のように、vertical-alignプロパティの値に text-bottom を指定すると、 下端が「テキスト(文字)の下端」に揃うようになります。
その結果、冒頭でご紹介したHTMLの表示結果は、下図のようになります。

画像の横に、ベースラインの下側にはみ出る文字を書いてみるとよく分かります。

先ほどのスタイルを適用することによって、画像の下端が、ベースラインではなく文字の下端に揃っていることがお分かり頂けるでしょう。
今回は、画像の下側に現れる余計な隙間を、スタイルシートを使ってなくす方法をご紹介致しました。
この方法を頭の隅に入れておくと、画像を使った様々なデザインの途中で余計な余白が出てしまった場合でも、簡単に対処できるでしょう。
関連キーワード[PR]
人気ホームページ作成ランキング
Powered by 価格.com
関連キーワード[PR]