CODEWITHSUNDEEP
htmlcss
Micheal_Song
Micheal_Song

Reputation: 159

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?

Upvotes: 6

Views: 3885

Answers (5)

Ciro Santilli OurBigBook.com
Ciro Santilli OurBigBook.com

Reputation: 382622

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

display: block; on img from https://stackoverflow.com/a/38091633/895245 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>

Upvotes: 0

Denys Sokolov
Denys Sokolov

Reputation: 83

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

Try: line-height: 0;

Upvotes: 0

Nikola Kokotec
Nikola Kokotec

Reputation: 251

You can show image like a block to fix that,

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

Upvotes: 19

Nikhil Maheshwari
Nikhil Maheshwari

Reputation: 2248

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/

Upvotes: 0

kevin seda
kevin seda

Reputation: 406

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

Upvotes: 0

Related Questions