関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
デジタル関連コミュニティ
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
ホームページ作成
【ホームページ作成】画像の下に謎の隙間ができるのを防ぐには
画像の表示・活用 (HTML,CSS,JavaScript)
更新日：2006年06月09日
画像の下に謎の隙間ができるのを防ぐには
背景色を付けたボックス内に画像を配置した場合など、画像の下側に謎の余白が現れることがあります。この余白は、なぜ現れるのでしょうか。また、この余白をなくすには、どうすればよいでしょうか？
なぜ、画像の下に余白ができてしまうのか？
画像の下の余白は、なぜできてしまうのでしょうか？
その原因は、
画像の下端は、ベースラインに合わせられるから
です。
ベースラインとは、下図の赤色のラインのことです。
アルファベットの多くの文字は、このベースラインに下端が揃いますが、小文字の「g」や「j」など一部の文字は、このベースラインよりも下にはみ出ます。 画像は、このベースラインに下端が揃うように配置されますから、下側に余白ができてしまいます。
画像の下に余白ができないようにするには？
この余計な隙間をなくすには、下図のように、画像がベースラインではなく下端に揃えられるようにすれば良いですね。 スタイルシートを使うことで、画像がどこに揃えられるのかを指定することができます。
スタイルシートには、「行の中での縦方向の位置」を指定するための vertical-align というプロパティがあります。 これを活用します。
この記事の担当ガイド
関連キーワード[PR]
住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！ さぁ、いますぐチェック！
人気ホームページ作成ランキング
Powered by 価格.com
関連キーワード[PR]
関連キーワード[PR]
メルマガ登録
【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。
おすすめ厳選サイト
季節特集
専門家を探せる、相談できる。
All About モバイル
Copyright(c) All About, Inc. All rights reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます