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

Posted 2023-03-06

【中文标题】图像容器元素不需要的额外高度[重复]

【英文标题】：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">

【参考方案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">