Height of div is greater than image

Question

I am a rookie for front-end development. Recently, I wrote codes like:

<div style="background-color:red">
        <img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'>
</div>

The height of image(logo.jpg) is 80px, but the height of div is 82px. Why?

Waterfront

Possible duplicate of Image inside div has extra space below the image – Mahan

Div height is greater than image, because space around image is pushing div to have that height. Edit your image in photoshop, cut the space up and down image., and it will work! Good luck! – Yettayetti

Answer 1

You can show image like a block to fix that,

<div>
    <img style="display:block" src='logo.jpg'>
</div>

Seaton

Why does this work? – Ginkgo

Possible explanation of why this works here: https://mcmap.net/q/63367/-image-inside-div-has-extra-space-below-the-image – Alienable

One downside of this is that if you wrap your img in <a, then the <a is clickable outside of the image area to the right. vertical-align: middle solves that as well: https://mcmap.net/q/1603205/-height-of-div-is-greater-than-image – Beastings

Answer 2

<div style="height:your height; width:your witdh;">

 <img src='logo.jpg'>

</div>

To change the height or width you can do what i did above with inline style. or give the div a class or give the div an id and style it in an external stylesheet.

Grapnel

Answer 3

You need to write proper css to achieve this.

<div class="wrap">
   <div class="box1">
    <img src="http://www.placekitten.com/500/500">
   </div>
</div>

.box1 {
 width:auto;
 height: auto;
 max-width: 600px;
 max-height: 300px;
 background-color:chocolate;
 padding:5px;
 display: inline-block;
}
.box1 img {
 vertical-align: top;
 max-width: inherit;
 max-height: inherit;
}
.wrap {
 border: 1px dotted gray;
 margin: 1.00em 0;
 text-align: center;
}

JsFiddle : https://jsfiddle.net/nikdtu/75nu1a4m/

Waterway

Please write a short explanation so that the OP would understand better. Why use this class, etc. It would be really helpful for the OP since he has stated he's a rookie. – Acrogen

Answer 4

div
{
     line-height: 0;
     ... 
     img
     {
       ...
     }
}

Try: line-height: 0;

Genteelism

Answer 5

vertical-align: middle on img makes links wrapping the image work as desired

display: block; on img from https://mcmap.net/q/1603205/-height-of-div-is-greater-than-image works but it has a downside: if you want to wrap the image in <a, then the <a is clickable outside of the image area itself to the right.

But instead using vertical-align: middle from Image inside div has extra space below the image overcomes that issues:

<div style="background-color: blue;">before</div>
<div>
  <a href="http://example.com">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Chick.jpg/320px-Chick.jpg" style="background-color: red; vertical-align: middle;">
  </a>
</div>
<div style="background-color: green;">after</div>

Beastings