【ホームページ作成】画像の下に謎の隙間ができるのを防ぐには

画像の下に余白ができないようにするには？

「行の中での縦方向の位置」を指定するための vertical-align というプロパティを使えば、 下図のように、画像がベースラインではなく下端に揃えられるようになります。

画像がdiv要素の中にある場合は、次のようにスタイルを記述します。

もし、div要素ではなくh1要素の中にある場合には、次のように記述します。

上記のように、vertical-alignプロパティの値に text-bottom を指定すると、 下端が「テキスト（文字）の下端」に揃うようになります。
その結果、冒頭でご紹介したHTMLの表示結果は、下図のようになります。

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

先ほどのスタイルを適用することによって、画像の下端が、ベースラインではなく文字の下端に揃っていることがお分かり頂けるでしょう。

おわりに

今回は、画像の下側に現れる余計な隙間を、スタイルシートを使ってなくす方法をご紹介致しました。
この方法を頭の隅に入れておくと、画像を使った様々なデザインの途中で余計な余白が出てしまった場合でも、簡単に対処できるでしょう。

関連記事

• 画像の代替文字、ちゃんと読めてますか？
• キャプション付き画像を左右の端に寄せたい
• 看板画像に文字を重ねたり…　画像上の自由な位置に字を重ねる
• ランダムに画像を表示したい
• 段組を崩さずに巨大な画像を貼るには
• 画像にするとたくさんの問題が…　文字を画像化するデメリット