パディングとマージンがゼロであっても、画像の下に予期しないスペースがあるのはなぜですか?

画像の下に予期しないスペースがある: 原因と解決策

パディングとマージンの値にゼロを適用しているにもかかわらず、画像の下に不可解な空白が表示されます。この不可解な問題は、インライン ブロック要素内の文字として扱われる画像の固有の動作から発生します。

文字として、画像はベースライン (一貫性を維持するためにテキスト文字に対して確立された線) に揃えられます。ただし、「q」や「j」などの特定の文字には、ベースラインの下に伸びるディセンダーがあります。後続の行との衝突を防ぐために、ベースラインの下にスペースが確保されています。

この図は、テキストの配置を制御するさまざまな線を示しています。

[WHATWG からベースライン図を挿入]

したがって、テキストがない場合でも、画像はベースラインに合わせて配置されます。この状況を解決するには、簡単な CSS 調整を実装できます。

img {
  vertical-align: bottom;
}

この変更により、画像が行の一番下に配置され、謎のスペースが削除されます。ただし、小さな画像 (行の高さよりも短い) を扱う場合、画像の上に追加のスペースが表示される場合があります。これを解決するには、line-height: 1px; を割り当てます。

この包括的な説明と解決策は、同様の問題に遭遇した多くの人の懸念に対処する必要があります。

以上がパディングとマージンがゼロであっても、画像の下に予期しないスペースがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。