インラインブロック画像の下に余分なスペースがあるのはなぜですか?それを修正するにはどうすればよいですか?

画像の下の謎の空間: 原因と解決策を明らかにする

画像をインラインブロック要素として表示すると、次のような複雑なシナリオに遭遇する可能性があります。パディングとマージンをゼロに設定しているにもかかわらず、その下に空きスペースが表示されます。この不可解な現象は、テキスト内の文字に似たインライン ブロック要素の固有の動作から生じています。

文字に文字の最下行を示すベースラインがあるのと同じように、画像もこのベースラインに沿って配置されます。その結果、隣接するテキストがない場合でも、画像はベースラインに整列し、「p」や「q」などの文字に尾をぶら下げるための予約スペースが原因で下にギャップが生じます。

これを修正するには、次のようにします。 vertical-align:bottom の機能を利用できます。この CSS プロパティは画像を行の一番下に固定し、残っている空白を効果的に削除します。

img {
    vertical-align:bottom;
}

行の高さより小さい画像の場合は、微妙な調整が必要です。コンテナ要素に line-height:1px を導入すると、画像上の潜在的なスペース侵入が排除されます。

これらの簡単な調整を採用することで、画像の下に謎の空の領域が存在することなく、割り当てられたスペース内に画像がぴったりと収まるようになります。

以上がインラインブロック画像の下に余分なスペースがあるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。