htmlcss

Height of div is greater than image

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?

Solution

  • You can show image like a block to fix that,

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