画像の下に余計な空間ができないようにする方法 前のページでご紹介したとおり、「行の中での縦方向の位置」を指定するvertical-alignプロパティを使えば、画像を「ベースライン」ではなく「下端」に揃えられます。このとき、vertical-alignプロパティの値に「text-bottom」を指定した場合と、「bottom」を指定した場合とでは、下図のような違いがあります。 「フォントの高さ」よりも「行の高さ」(line-heightプロパティの値)の方が高い場合は、上図の淡い赤色で塗った領域のように、「文字のある領域」よりもさらに下に空間があります。背景色はそこまで塗られるため、背景色のあるボックスの内側にある行では、vertical-alignプロパティに値「text-bottom」ではなく「bottom」を指定しないと、無駄な空間は消えません。 画像の下に余計な空間ができないように