imgタグ画像の下部にあるデフォルトの空白を削除する3つの方法

1. サンプルコード

<div class="content" style="background-color:pink;">
        <img src="./imgs/avatar.jpg" style="width: 300px;height: 300px;">
</div>

2. 運用実績

3. 空白の理由

1. 画像の表示属性はデフォルトでインラインです。

2. 画像のvertical-align属性のデフォルト値はbaselineです

4. 解決策

方法 1: img をブロックレベル要素に変換する

img { 表示:ブロック; }

方法2: imgのvertical-align属性値をmiddleに設定する

img { 垂直整列:中央; }

方法 3: img の親要素の行の高さを 0 に設定します (上記のコードの親要素は class="content" の div です)

.content {行の高さ:0; }