CODEWITHSUNDEEP
htmlcssimage
Joe_AK
Joe_AK

Reputation: 431

Image will not fill div

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:

https://i.sstatic.net/7Qyk8.jpg

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).

Upvotes: 9

Views: 11422

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

Add a vertical-align value (other than the default baseline) to your image like: top, middle...

vertical-align: top;

Example:

/* QuickReset */ *, ::after, ::before { margin: 0; box-sizing: border-box; }

.row {
  background-color: orange;
}

img {
  vertical-align: middle;    /* or top, bottom, ...  */
}
<div class="row">
  <img src="https://www.gravatar.com/avatar/69cfcc1895204718647d030c5e887cbe?s=64&d=identicon&r=PG" />
  <span>Some text</span>
</div>

Alternatively, you could make your parent display set to: flex, inline-flex, or grid - if that fits your needs

/* QuickReset */ *, ::after, ::before { margin: 0; box-sizing: border-box; }

.row {
  background-color: orange;
  display: flex;
  align-items: center;
}
<div class="row">
  <img src="https://www.gravatar.com/avatar/69cfcc1895204718647d030c5e887cbe?s=64&d=identicon&r=PG" />
  <span>Some text</span>
</div>

Upvotes: 29

Sky
Sky

Reputation: 7711

I fixed this by setting display of img to block:

display: block;

Upvotes: 5

Related Questions