画像の下部の空白部分の問題を解決する

最近のプロジェクトに取り組んでいるとき、下の図に示すように、画像を参照すると常に下部に空白スペースがあることに気付きました。

<スタイル>
    .img-ボックス{
        境界線: 2px 実線の赤;
        幅: 550ピクセル;
    }
</スタイル>

<div class="img-box">
    <img src="./img.png" alt="">
</div>

後でわかったのですが、その理由はインライン ブロック要素がテキストのベースラインに揃えられるためです。この問題を解決するのは実はとても簡単で、主に 2 つの方法があります。

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

画像 {
    垂直方向の位置合わせ: 下;
}

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

グ {
    表示: ブロック;
} 

まあ、問題は簡単に解決しました。
もっと良い方法があれば、ぜひ共有し、コメント欄にメッセージを残してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。