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

画像の下の謎のパディングについて

パディングとマージンが次のように設定されている場合でも、画像の下に原因不明の空白スペースが存在することがよくあるのはなぜですかゼロ?

説明

画像は、テキスト内の文字と同様に、インラインブロック要素として扱われます。これらは、ほとんどの文字の下部を横切る線であるベースラインのルールに従っています。ただし、「p」や「q」などの特定の文字には、ベースラインの下に伸びるディセンダがあります。これらのディセンダーが後続の行と衝突しないように、ベースラインの下にスペースが確保されています。

画像はこのベースラインに合わせて配置されるため、テキストがない場合でも下部に余分なスペースが生じます。

解決策

この問題を軽減するには、CSS プロパティvertical-align:bottomを画像に適用します。これにより、画像が行の一番下に配置され、謎のパディングが削除されます。

注意

この解決策はパディングの問題を解決しますが、次の場合は別のパディング問題が発生する可能性があります。画像が行の高さよりも小さいです。このような場合、画像の上に余分なスペースが表示されることがあります。これを修正するには、 line-height: 1px をコンテナ要素に追加します。

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