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

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

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

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

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

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

拡張: ベースラインとは何ですか?

ベースラインは、私たちが子供の頃に使った英語の教科書です

最初の行は、身長の中央値です

4番目の線は次のとおりです: 高さを下げる

解釈: 上昇 上昇 平均線 平均線 下降 降下

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

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

オプション 2: 画像の高さを奇数 (1、3、5、7 の奇数) に処理します。たとえば、画像自体の高さが 200 ピクセルになります。この問題を解決するには、画像を 201px または 199px の高さに PS 処理します。画像自体の高さは 202 ピクセルですが、IE6 および IE7 ブラウザーでは、画像の上に余分な 1 ピクセルの空白が生じます。そこで、絵をカットする際に絵の高さを奇数（奇数）にすることで解決できます。