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