背景色を付けたボックス内に画像を配置した際などに、画像の下に余計な空白が見えてしまうことがあります。この余白は、「画像の下端」が「文字のベースライン」に揃えて表示されることが原因です。CSSを使って「画像の下端」を「行の下端」に揃えるよう装飾すれば、謎の余計な隙間を消すことができます。文宏ホームページ作成ガイド画像の下に謎の余計な隙間が見える背景色を付けたボックス内に画像を配置した際に、画像の下に謎の隙間が見えることがあります。この無駄な空間は、なぜ表示されるのでしょうか。画像と背景色を組み合わせてデザインを作りたい場合や、複数の画像を並べてデザインしたい場合などで、このような意図しない余計な空間ができてしまうと困ります。今回は、この「画像の下にできる隙間」をなくす方法をご紹介致します。画像の下部に謎の空間ができるのは、次のようなHTMLを表示させた場合です。alt="海"></p>どんなブラウザでも、謎の隙間が上記のHTMLは、ブロックレベル要素の中に、画像を1つ入れているだけです。このような記述は頻繁に使われるでしょう。このとき、文字サイズ(font-size)がとても小さかったり、行の高さ(line-height)が低かったり、表示に使われているフォントの種類によっては、あまり隙間が気にならない場合もあります。右図のように画像の下に隙間が見える場合もあります。以下のようにHTMLとCSSを記述すると、謎の隙間がハッキリ見えるでしょう。jump</p>上記のHTMLでは、画像の隣に小文字のアルファベットを掲載しています。Roman」等のセリフ系フォントで表示させています。これらのソースをブラウザで表示させると、下図のように見えます。画像の下に、謎の隙間がハッキリ見えるでしょう。画像の下に隙間が見える原因は、文字を横に書くと分かりやすいなぜ、画像の下に謎の隙間ができてしまうのか?この「画像の下に無駄な空間が表示される」問題の原因は、上図で気づかれた方々も多いことでしょう。行内に画像が表示される際、「画像の下端がどこに揃えられるのか?」という仕様が原因です。この謎の隙間に関して、詳しい原因と簡単な対策方法を次のページでご紹介致します。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。