【必看】HTML+CSS去掉img图片底部的空白的3种通用方法

去掉img图片底部的空白的3种通用方法

效果如图:

【必看】HTML+CSS去掉img图片底部的空白的3种通用方法_第1张图片

图片下方有莫名的空白,总是去不掉!

空白产生的原因:图片是内联元素,默认带有一定的间距,间距与文字字体有一定的关系。

因此,基于此原因有一下解决方法:

方法一

把图片变成区块元素
【必看】HTML+CSS去掉img图片底部的空白的3种通用方法_第2张图片

方法二

给内联元素的图片加垂直对齐方式:

  • vertical-align: top | middle | bottom;

【必看】HTML+CSS去掉img图片底部的空白的3种通用方法_第3张图片

方法三

把上级元素的字体大小改成0像素
【必看】HTML+CSS去掉img图片底部的空白的3种通用方法_第4张图片
搞定!

是不是很简单!

推荐我开的课程给大家学习:
H

  1. 2020年新前端实战-HTML5精细化教程
  2. 2020年新前端实战-CSS3精细化教程

你可能感兴趣的:(HTML,JS,CSS,html5,css3)