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

消除图片底部空白
最新推荐文章于 2025-09-17 21:58:04 发布
原创 最新推荐文章于 2025-09-17 21:58:04 发布 · 5.4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #css3

本文介绍了解决图片下方莫名空白的三种方法，包括调整图片显示模式、设置垂直对齐及更改父元素字体大小。

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

效果如图：

在这里插入图片描述

图片下方有莫名的空白，总是去不掉！

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

因此，基于此原因有一下解决方法：

方法一

把图片变成区块元素
在这里插入图片描述

方法二

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

  • vertical-align: top | middle | bottom;

在这里插入图片描述

方法三

把上级元素的字体大小改成0像素
在这里插入图片描述
搞定！

是不是很简单！

推荐我开的课程给大家学习：
1、2020年新型前端HTML5 CSS3 JS Canvas AJAX Http前后端交互（文档课件）

Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 8187
Html5 + Css3笔记详细汇总大全
HTML5 + CSS3 电商网页项目---品优购
primebrake的博客
06-07 695
它在Web开发中用来定义一组基础样式规则，这些规则会应用到网页的大部分元素上。这个文件可能包含一些通用的样式设置，比如字体、颜色、边距、填充等，它们为整个网站或应用程序的样式提供了一个一致的起点。以下是base.css代码。
如何使用 CSS 去除图片下方的多余空白
qq_25153359的博客
05-31 939
如何使用 CSS 去除图片下方的多余空白
css消除图片下的白边
最新发布
小小•愿望的博客
09-17 350
摘要： 针对img作为行内元素产生的空白间隔问题，文章提供了多种解决方案：1）调整margin或position（不够友好）；2）将img转为块元素（display:block，推荐）；3）父元素设置font-size:0（可能影响文本显示）；4）调整vertical-align对齐方式。还可通过父元素设置宽高并overflow:hidden解决。不同方法各有利弊，开发者可根据需求选择。（149字）
html图片怎么去掉空白,css去除<img>图片下多余空白区域
weixin_27713587的博客
06-08 3135
css去除图片下多余空白区域 在进行页面的DIV+CSS排版时，遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。1、将图片转换为块级对象设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。2、设置图片的垂直对齐方式设置图片的ver...
css去除<img>图片下多余空白区域
weixin_34026276的博客
08-02 422
css去除<img>图片下多余空白区域在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。　　1、将图片转换为块级对象　　设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block...
html css 图片底部空,图片下面出现空白怎么解决_html/css_WEB-ITnose
weixin_29807369的博客
06-04 1672
图片下面出现空白怎么解决:在网页布局中可能会遇到这样的问题，那就是在图片的下面会出现空白，这种现象一般只会在IE6浏览器中出现，不过在火狐下也有可能会出现，这种现象在很多情况下都会严重影响网页的美观度，下面就介绍一下如何消除此种现象。解决方案一:将转换为块级元素，例如: img {display:block;}以上方式可以解决此问题。解决方案二:使用vertical-align属性来实现此效...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7763
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
HTML5 + CSS3面试题整理
热门推荐
计算机源码之家的博客
09-29 1万+
...
CSS - 去除图片img底侧空白缝隙
anchenhe9360的博客
05-11 2657
1. 图片底部有空隙 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img { /* vertical-align: m...
CSS 去除图片元素底部的空白
iminuo的博客
10-13 1134
CSS 去除图片元素底的空白 This “problem” persists because it’s not a bug. It’s just how the inline-formatting context works. MINUO.ME DIV+CSS排版时图片标签底部会出现空白，解决方法有很多，在此记录我常用的2个。 No.1 img {display: block;} No.2 img...
CSS：去除图片底侧缝隙
tiandaochouqin_1的博客
03-06 560
问题：图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐，这样会造成图片底侧会有一个空白缝隙。 解决方法： ①display:block; 转换为块级元素 ②vertical-align:top;middle; 因为默认是baseline（ div内的img 和 div 的基线对齐 ），所以会有缝隙。 ...
img的底部空白
当然，我在扯淡！（Paulo Airfald）
02-24 994
img的底部空白部分   近日在学习慕课网的一个小项目的时候一个细节引起了我的注意，具体如下： 上面白色左边的div的width:200px;height为自适应只放一张图片，图片大小为width:200px,height：80px;可是图片竟然溢出了，通过查看元素发现左边div的高度为83.5px; 竟然比图片还大3.5px,可是我明明只放了一张图片了啊！而且m
html5消除图片之间的空白,html5使用new image()创建的图片直接使用drawImage画的时候为空白...
weixin_33047553的博客
06-03 768
如下代码varim=newImage();im.src='./0.jpg';canvas.drawImage(im,_x,0,this.width,this.height,0,0,cw,ch);下面代码运行后可能为空白,是因为new Image加载图片是异步加载的,图片还没有加载到浏览器下面的代码已经开始使用啦，处理方法是等图片加载完后再调用下面的画图代码,要放到图片加载完成的...
图片底部空白缝隙解决法方案（CSS)
weixin_63043528的博客
12-11 906
【如果父元素没有为该属性显式设置值，浏览器会沿着DOM树向上查找，直到找到一个定义了该属性的值，或者到达文档的根节点。如果在整个DOM树中都找不到定义的值，浏览器将使用其默认值。——将一个属性重新重新设置为其从父母那继承的属性值，如果没有继承则是重置成初始值。的结果值将匹配上一个级联层或下一个匹配规则，允许你从当前规则跳到上一个级联层，从而继承另一个选择器的样式。可以防止级联层中最接近的选择器的样式泄露到当前规则，这在重构CSS或重设样式时特别有用。——CSS全局关键字，用于控制样式的继承和覆盖。
如何用CSS去除图像的背景
我的博客，不一样的自我表达
04-04 1196
只需一行CSS代码，您就可以实现这种效果，而不需要任何花哨的软件或复杂的工具。在这个适合初学者的指南中，我们将逐步介绍使用 CSS 删除图像背景的步骤。这是我的 html 代码，你可以看到我的图像有一个写入背景，而我的 html 正文有一些其他背景颜色，我需要删除这个白色背景并希望使其透明。现在，如果我想删除图像的背景，我只需添加一行代码即可mix-blend-mode: multiply;只需一行简单的 CSS，您就可以轻松删除网页上图像的背景。您还可以将其添加到您的图像中，检查它是否适合您。
CSS3-案例-去掉图片底部空白缝隙
weixin_54021642的博客
06-23 258
去掉图片底部空白缝隙
如何解决div里面img图片下方有空白的问题？（实用、赞）
chelen_jak的专栏
04-24 980
原文出处：https://jingyan.baidu.com/article/7082dc1c69dc6fe40a89bdfe.html 相信网站前端开发者可能会遇到这样的问题，<div><img src="picture.png"/></div>这样的格式在html5的文档标准下会有一段空白区域，那么怎样去掉这部分空白区域呢？ 方法/步骤 1、首先...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java全栈开发架构师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值