4

次のjsFiddleを参照してください:http: //jsfiddle.net/Leng/kQvNH/

水平ドットのすべての線の周りにかなりの量のパディング(上に約15ピクセル、下に4ピクセル)があるように見える理由を誰かが説明できますか?画像の高さはわずか2pxです。パディングはどこから来ていますか?

ご注意ください:

私にとって、画像の周りのこの不思議なパディングは、HTML5の見出しでドキュメントを開始したときにのみ発生します。

<!DOCTYPE html>
<html>

HTML4やWebページのこのXHTML見出しなど、他のヘッダーを使用すると、画像は正常に表示されます(パディングなし) 。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

したがって、これはHTML5の不整合のようです。標準のHTML5見出しに切り替えたいのですが、このちょっとした煩わしさが私を妨げています。

ご指導ありがとうございます。

ソリューション:

これがソリューションを備えたjsFiddleです:http: //jsfiddle.net/Leng/Sn2PC/

img
{
    display:block;
    margin:0 auto;
}

これは、以下のクリスの回答に基づいています。

font-size:0またはline-height:0を設定することは、フォントサイズと行の高さを(明らかに)混乱させるため、解決策ではないことに注意してください。

また、HTML4またはXHTMLで通常の中央揃えのパディングされていない画像を作成するために、表示をブロックに設定して自動マージンを設定する必要はありませんでした。

HTML5はこの「機能」を作成しました。画像はインラインであり、行の高さまたはフォントサイズに基づいてパディングされます。

4

3 に答える 3

3

imgこれは要素がインラインであるためだと思います。font-sizeまたはを小さなものに設定すると、line-heightこれが修正されます。または、画像をに設定し、画像display: blockの高さを設定します。

于 2013-03-05T22:27:25.570 に答える
1

タグ<img>はインラインで表示されるため、通常のテキストと一緒に表示されます。コンテナの行の高さを画像の高さに近いものに変更するだけで、フォントサイズ(1px)で修正されます。

したがって、パディングを説明するために、画像の周囲にパディングはありません。これは、ユーザーエージェントによって定義された高さ(line-height)を持つ空のテキスト行です。

ここをいじる

于 2013-03-05T22:34:56.023 に答える
0

行を追加できます-height:2px; #theDivスタイルに

于 2013-03-05T22:29:18.723 に答える