Problema CSS/HTML.La imagen no llenará div
Esto es una locura, solo puedo suponer que soy un idiota. No puedo hacer que mi imagen llene el div en el que se encuentra. Constantemente hay 5 píxeles de "relleno" debajo de la imagen.
Aquí es el html:
<!doctype html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></head>
<body>
<div class="row">
<img src="pic2.jpg" />
</div>
</body>
Y aquí es el CSS:
body, .row, img {
padding: 0;
margin: 0;
border: none;
}
.row {
width: 80%;
background-color: orange;
}
img{
width: 50%;
}
Este es el resultado:
Como se puede ver, el (estúpido) la imagen azul y roja no llena el div naranja. Hay un 5px consistente de naranja que se muestra debajo de la imagen. Esto no se ve afectado por los cambios en los% anchos de la div o la imagen, o por el cambio de tamaño de la ventana.
Puedo arreglar esto con "margin: -5px;", pero quiero saber por qué está sucediendo (especialmente si en diferentes circunstancias la cantidad es más o menos de 5px).
Gracias por su ayuda (y lo siento nuevamente si esto es un error ridículo de mi parte).
Aquí es un ejemplo vivo http://jsfiddle.net/aDtUm/ – jacktheripper