div にネストされた画像の下部に白いブロックの問題と、solve_html/css_WEB-ITnose に対する 1 ピクセルの問題があります。

img が div にネストされている場合、一番下に白いブロックが表示されます

img はデフォルトでベースラインに従って配置されているためです。この絵を右側の p、q、y およびその他の文字と比較すると、これら 3 つの文字の「小さな尾」が絵の下の空白部分と同じ高さであることがわかります。下の写真の黒い線がそのベースラインです。

解決策: 1:vertical-align:bottom (推奨)

解決策: 2: display: block; (推奨されません)

推奨しない理由: ブラウザーの img のデフォルトのスタイルがインラインであるため、特別な必要があるため、この問題の本質は、img の垂直方向の位置合わせです。この問題では、bottom を使用するだけです。

html img 画像の上に 1 ピクセル ピクセルのギャップ ソリューションを作成します

オプション 1: フローティング要素を画像に追加しますcss など。 divcss5 img{ float: left}