画像の下に謎の隙間ができるのを防ぐ (サンプル)

▼画像の下に隙間ができています。

▼画像の横に文字を書いてみると原因が分かります。

quick doggy jump

▼画像の縦方向の位置をCSSで指定すると解決します。

quick doggy jump

このように、謎の隙間はできなくなります。原因と詳しい解決方法は、記事本文でご確認下さい。

▼ただし、値を「bottom」ではなく「text-bottom」にすると、行の高さによってはまだ余白が出る場合があります。

quick doggy jump

※フォントの下端が分かりやすいように、ボックスだけでなく「文字(インライン要素)部分」にも背景色を加えています。

記事に戻る