画像の下に、謎の空白が発生しないようにする件

極めて基本的なことですが、改めて書いておきたいと思います。

内に画像や文字を配置割いた際に、下に空白ができてしまう事があります。

例えば、こんな感じでしょうか…。

これは桜の画像です！

特に背景に色があったりする場合レイアウト上の問題となってしまいます。

これを解決するのはCSSで大丈夫です！

具体的には、内部に配置する画像に対して以下の設定を行うだけです。

div#hoge p img {
   vertical-align: bottom;
}

ここでポイントとなるのが、「text-bottom」ではなく、「bottom」を指定するという事です。

これで、余分な空白は無くなるので、いらいらしたら「vertical-align: bottom;」を指定しましょう！ｗ

スラスラわかるCSSデザインのきほん 著：狩野 祐東 参考価格：￥ 2,052 価格：\2,052 OFF : ()