CSS/HTML の問題。
これはクレイジーです - 私は自分がばかだとしか思えません。画像で div を塗りつぶすことができません。画像の下に一貫して 5 ピクセルの「パディング」があります。
html は次のとおりです。
<!doctype html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></head>
<body>
<div class="row">
<img src="pic2.jpg" />
</div>
</body>
CSS は次のとおりです。
body, .row, img {
padding: 0;
margin: 0;
border: none;
}
.row {
width: 80%;
background-color: orange;
}
img{
width: 50%;
}
結果は次のとおりです。
ご覧のとおり、(ばかげた) 青と赤の画像はオレンジ色の div を埋めていません。画像の下に一貫して 5 ピクセルのオレンジ色が表示されています。これは、div または画像の % 幅の変更、またはウィンドウのサイズ変更による影響を受けません。
「margin: -5px;」でこれを修正できますが、なぜそれが起こっているのか知りたいです (特に、さまざまな状況で量が 5px より多いか少ないか)。
ご協力いただきありがとうございます (これが私のばかげたエラーである場合は、もう一度申し訳ありません)。