图像容器元素的不需要的额外高度

Question

如何摆脱容器元素的额外高度？ 请参阅示例代码中第一张图片下方的蓝色条纹

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

Answer 1

将display:block;添加到img。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;