画像の下に予期しないスペースができるのはなぜですか?どうすれば修正できますか?

下に予期しないスペースが表示される画像: 詳細な説明

問題:

画像でもパディングとマージンをゼロにしてスタイルを設定すると、その下に謎の空きスペースが現れることがよくあります。これにより、画像の境界線が下端から離れて配置されます。

原因:

画像は、次のベースライン ルールに従うインライン ブロック要素として扱われます。タイポグラフィ。ベースラインは、テキスト ブロック内のほとんどの文字の最下行です。ただし、「p」や「q」などの特定の文字はベースラインよりも下に伸びているため、重ならないようにベースラインと一番下の行の間にスペースが必要です。

問題の修正:

画像の下のスペースを削除するには、次の CSS を使用して画像の垂直方向の配置を調整します:

img { vertical-align: bottom; }

これ画像をその行の一番下に配置し、不要なスペースを削除します。

潜在的な問題と解決策:

ただし、小さな画像では上にスペースが表示される場合があります。これを解決するには、次の CSS をコンテナ要素に追加します。

line-height: 1px;

これにより、行の高さが最小値に設定され、小さな画像でも正しく配置されるようになります。

以上が画像の下に予期しないスペースができるのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。