图像容器元素不需要的额外高度[重复]

【问题标题】：Unwanted extra height to image container element [duplicate]图像容器元素不需要的额外高度[重复]
【发布时间】：2015-09-23 15:19:59
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

将display:block; 添加到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">

【讨论】：