html - 内部に画像がある div の 3px 余分な高さ

Question

私は新しいサイトに取り組んでいますが、ちょっとしたデザインが頭に浮かびません。

基本的に、ユーザーが面白い写真をアップロードできるサイトを作成しています。写真が表示される領域は下に 3px のギャップがあります。これが私が意味するスクリーンショットへのリンクです。

私はたくさんのことを試しましたが、何もうまくいかないようです。誰かが解決策を提案できる場合は、してください。

ありがとう。

Answer 1

vertical-alignこれは、画像のデフォルト値によるものです。彼らはbaselineです。toporに変更するbottomと消えます。

img{
    vertical-align: top;
}

余分なスペースはベースラインの下の領域で、yやのように下にぶら下がっている文字用gです。