Unknown gap between bottom of img and parent divs border

Question

I have the CSS and HTML below. I try changing the size of the image and it does not work. Why is there a gap underneath my image?

#photo {
  position: absolute;
  margin-left: 15px;
  margin-top: 15px;
  border: 3px solid black;
}

<div id="photo">
  <img src="http://www.placehold.it/210X180" alt="Picture" style="width:210px;height:180px" />
</div>

Have you provided the correct html?. how come your starting the with closing div tag?. — Pbk1303, Sep 11 '14 at 00:35
assuming that you accidentally added a closing tag first, i entered the code in the jsfiddle, and the width and height are changing fine. http://jsfiddle.net/ahs9dv0L/ — Pbk1303, Sep 11 '14 at 00:38
er, wait.. what's up with the gap at the bottom of the box? http://jsfiddle.net/ahs9dv0L/1/ And no that's not part of the image... I tried four different ones, all get the same gap at the bottom. — zipzit, Sep 11 '14 at 00:50
Bit late, but this is a duplicate of [Why an image inside a div has an extra space below the image?](http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image) — misterManSam, Nov 27 '14 at 03:20

user3835327 · Answer 1 · 2014-09-11T01:01:44.483

1

Try remove css border

border: 3px solid black;

And add border inside image tag

<img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" alt="Picture" border="3">

Or remove the id="photo" from <div> and add inside <img tag>

<img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" alt="Picture" id="photo">

edited Sep 11 '14 at 01:01

answered Sep 11 '14 at 00:55

user3835327

570
1
5
19

Except this doesn't really get rid of the extra space at the bottom of the div, just keeps you from seeing it. – Lee Saxon Sep 11 '14 at 01:00

score 0 · Answer 2 · answered Sep 11 '14 at 00:57

0

I have no clue why this is happening.

Just as kind of a side "answer," though, for whatever it's worth: if you don't need the div, this problem goes away if you get rid of it and put the

id="photo"

directly on the image.

answered Sep 11 '14 at 00:57

Lee Saxon

457
3
14

score 0 · Accepted Answer · edited May 23 '17 at 11:57

HTML

<div id="photo">
         <img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" alt="Picture" style="width:250px;height:180px"/>
    </div>

CSS

 #photo {
        position: absolute;
        margin-left: 15px;
        margin-top: 15px;
        border: 3px solid black;
        line-height: 0;
    }

The addition of the line-height: 0; forces the image to line up correctly within the div container, precluding the empty space at the bottom of the image... ref: http://jsfiddle.net/ahs9dv0L/3/ see also: Image inside div has extra space below the image

Thank you! I am glad there is a way to do it with CSS, I wasn't sure. — Sol Boden, Sep 11 '14 at 22:27

Ahmed Alnabhan · Answer 4 · 2014-09-11T02:16:10.493

0

Now, you are targeting the whole div section. To work on the image use the following code in your css file:

    #photo img {
               position: absolute;
               margin-left: 15px;
               margin-top: 15px;
               border: 3px solid black;
               }

edited Sep 11 '14 at 02:16

answered Sep 11 '14 at 01:13

Ahmed Alnabhan

608
1
9
13

score 0 · Answer 5 · answered Sep 30 '22 at 10:39

0

For me as there are elements side by side what works is display:flex on the parent element in this case #photo I've added a border red on the parent to make the gap clearer, see with and without display:flex

answered Sep 30 '22 at 10:39

Juliano Vargas

284
2
19

Unknown gap between bottom of img and parent divs border

5 Answers5