Unwanted extra height to image container element

Question

how to get rid of extra height of container element? See blue stripe below the first picture in the sample code

div {
  background-color: blue;
  display: inline-block;
}

<div>
  <img src="https://lh5.googleusercontent.com/-8ryRirhRs5o/VEOv3vaXt7I/AAAAAAAAKSU/xBB9lnkn35Y/s144/BGDragonNGlare.jpg">

</div>

<img src="https://lh5.googleusercontent.com/-8ryRirhRs5o/VEOv3vaXt7I/AAAAAAAAKSU/xBB9lnkn35Y/s144/BGDragonNGlare.jpg">

score 2 · Accepted Answer · answered Jul 06 '15 at 13:04

Add display:block; to the img.

div {
  background-color: blue;
  display: inline-block;
}
div img{
  display: block;  
}

<div>
  <img src="https://lh5.googleusercontent.com/-8ryRirhRs5o/VEOv3vaXt7I/AAAAAAAAKSU/xBB9lnkn35Y/s144/BGDragonNGlare.jpg">

</div>

<img src="https://lh5.googleusercontent.com/-8ryRirhRs5o/VEOv3vaXt7I/AAAAAAAAKSU/xBB9lnkn35Y/s144/BGDragonNGlare.jpg">

Unwanted extra height to image container element

1 Answers1