Menu
CSS/HTML problem.
This is crazy - I can only assume that I am an idiot. I cannot make my image fill the div it is in. There is consistently 5px "padding" beneath 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 (stupid) blue and red image does not fill the orange div. There is a consistent 5px of orange showing beneath the image. This isn't affected by changes to the % widths of the div or the image, or by resizing the window.
I can fix this with "margin: -5px;", but I want to know why it is happening (especially if under different circumstances the amount is more or less than 5px).
Thanks for your help (and sorry again if this is a ridiculous error on my part).
427
Add a vertical-align value (other than the default baseline) to your image like: top, middle...
vertical-align: top;
I fixed this by setting display of img to block:
display: block;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
