画像の下部に空白ができる問題をCSSで解決する方法

問題の説明:

下の図に示すように、画像を引用する場合、下に空白スペースが常に存在します。

css コード:

<style>
    .img-box {
        border: 2px solid red;
        width: 550px;
    }
</style>
<div class="img-box">
    <img src="/static/imghw/default1.png"  data-src="./img.png"  class="lazy"   alt="">
</div>

原因分析:

インライン ブロック要素はテキストのベースラインに揃えられます。

(推奨チュートリアル: CSS チュートリアル)

解決策:

1. にvertical-align: middle | top |bottomなどを追加します。画像。 (推奨)

img {
    vertical-align: bottom;
}

2. 画像をブロック レベルの要素に変換します。display: block; (ブロック レベルの要素を変換するとレイアウトに影響を与える可能性があるため、最初の方法をお勧めします)

g {
    display: block;
}

推奨関連ビデオチュートリアル: css ビデオチュートリアル

以上が画像の下部に空白ができる問題をCSSで解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。