CSS/HTML проблема.Изображение не будет заполнено div
Это сумасшествие - я могу только предположить, что я идиот. Я не могу заставить мое изображение заполнить div, в котором он находится. Постоянно 5px «padding» под изображением.
Вот 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. Под изображением находится непрозрачный 5px оранжевого цвета. На это не влияют изменения ширины% div или изображения или изменение размера окна.
Я могу исправить это с помощью «margin: -5px;», но я хочу знать, почему это происходит (особенно если в разных обстоятельствах сумма больше или меньше 5 пикселей).
Благодарим за помощь (и жаль, если это смехотворная ошибка с моей стороны).
Вот живой пример http://jsfiddle.net/aDtUm/ – jacktheripper