CSS / HTML issue.
This is crazy - I can only assume that I'm an idiot. I can not make my image fill the div in which it is located. Continuously 5px "padding" under the image.
Here is the html:
<!doctype html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></head>
<body>
<div class="row">
<img src="pic2.jpg" />
</div>
</body>
And here is the CSS:
body, .row, img {
padding: 0;
margin: 0;
border: none;
}
.row {
width: 80%;
background-color: orange;
}
img{
width: 50%;
}
This is the result:
http://imgur.com/yELMe
As you can see, the (silly) blue and red image does not fill the orange div. Below the image is an opaque 5px orange. This is not affected by changing the width of the% div or image or resizing the window.
I can fix this with "margin: -5px;", but I want to know why this happens (especially if in different circumstances the amount is more or less than 5 pixels).
Thanks for your help (and sorry again if this is a ridiculous mistake on my part).