sự cố CSS/HTML.Hình ảnh sẽ không lấp đầy div
Điều này thật điên rồ - tôi chỉ có thể giả định rằng tôi là kẻ ngốc. Tôi không thể làm cho hình ảnh của tôi điền vào div nó được in. Có luôn là 5px "padding" bên dưới hình ảnh.
Đây là html:
<!doctype html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></head>
<body>
<div class="row">
<img src="pic2.jpg" />
</div>
</body>
Và đây là CSS:
body, .row, img {
padding: 0;
margin: 0;
border: none;
}
.row {
width: 80%;
background-color: orange;
}
img{
width: 50%;
}
Đây là kết quả:
Như bạn có thể thấy, (ngu ngốc) hình ảnh màu xanh và đỏ không điền vào div màu da cam. Có màu cam hiển thị 5px phù hợp bên dưới hình ảnh. Điều này không bị ảnh hưởng bởi các thay đổi về độ rộng% của div hoặc hình ảnh hoặc bằng cách thay đổi kích thước cửa sổ.
Tôi có thể sửa lỗi này bằng "lề: -5px;", nhưng tôi muốn biết tại sao nó xảy ra (đặc biệt nếu trong các trường hợp khác nhau, số tiền nhiều hơn hoặc ít hơn 5px).
Cảm ơn sự giúp đỡ của bạn (và xin lỗi một lần nữa nếu đây là một lỗi vô lý về phía tôi).
Dưới đây là một ví dụ sống http://jsfiddle.net/aDtUm/ – jacktheripper