Home/ Questions/Q 7824451
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T08:36:07+00:00

CSS/HTML problem. This is crazy – I can only assume that I am an

  • 0

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.stack.imgur.com/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).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0