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

最新推荐文章于 2024-07-15 14:31:36 发布
最新推荐文章于 2024-07-15 14:31:36 发布
阅读量4.9k 收藏 5
点赞数 3
文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SubStar/article/details/103761808
版权

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

效果如图：

在这里插入图片描述

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

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

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

方法一

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

方法二

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

  • vertical-align: top | middle | bottom;

在这里插入图片描述

方法三

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

是不是很简单！

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

Java全栈开发架构师
关注
CSS 去除图片元素底部的空白
iminuo的博客
10-13 1020
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...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6488
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
三种方式去除img标签图片底部默认空白
Orange71234的博客
08-31 665
方法3：将img的父元素的行高设置为0（以上代码的父元素为class="content"的div）方法2：设置img中的vertical-align属性值为middle。2.图片vertical-align属性的默认值是baseline。1.图片的display属性默认是inline。方法1：把img变成块级元素。
css - - - - - 去除图片默认的白色背景（混合模式 mix-blend-mode）
最新发布
Dark_programmer的博客
07-15 769
css - - - - - 去除图片默认的白色背景（混合模式 mix-blend-mode）
html图片怎么去掉空白,css去除<img>图片下多余空白区域
weixin_27713587的博客
06-08 2993
css去除图片下多余空白区域 在进行页面的DIV+CSS排版时，遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。1、将图片转换为块级对象设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。2、设置图片的垂直对齐方式设置图片的ver...
css去除<img>图片下多余空白区域
weixin_34026276的博客
08-02 378
css去除<img>图片下多余空白区域在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。　　1、将图片转换为块级对象　　设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block...
CSS - 去除图片img底侧空白缝隙
anchenhe9360的博客
05-11 2564
1. 图片底部有空隙 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img { /* vertical-align: m...
CSS：去除图片底侧缝隙
tiandaochouqin_1的博客
03-06 498
问题：图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐，这样会造成图片底侧会有一个空白缝隙。 解决方法： ①display:block; 转换为块级元素 ②vertical-align:top;middle; 因为默认是baseline（ div内的img 和 div 的基线对齐 ），所以会有缝隙。 ...
html+css+js基础问答
qq_43751465的博客
08-26 5274
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
HTML5 + CSS3面试题整理
热门推荐
计算机源码之家的博客
09-29 1万+
...
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4769
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
img的底部空白
当然，我在扯淡！（Paulo Airfald）
02-24 924
img的底部空白部分   近日在学习慕课网的一个小项目的时候一个细节引起了我的注意，具体如下： 上面白色左边的div的width:200px;height为自适应只放一张图片，图片大小为width:200px,height：80px;可是图片竟然溢出了，通过查看元素发现左边div的高度为83.5px; 竟然比图片还大3.5px,可是我明明只放了一张图片了啊！而且m
html5消除图片之间的空白,html5使用new image()创建的图片直接使用drawImage画的时候为空白...
weixin_33047553的博客
06-03 690
如下代码varim=newImage();im.src='./0.jpg';canvas.drawImage(im,_x,0,this.width,this.height,0,0,cw,ch);下面代码运行后可能为空白,是因为new Image加载图片是异步加载的,图片还没有加载到浏览器下面的代码已经开始使用啦，处理方法是等图片加载完后再调用下面的画图代码,要放到图片加载完成的...
html css 图片底部空,图片下面出现空白怎么解决_html/css_WEB-ITnose
weixin_29807369的博客
06-04 1570
图片下面出现空白怎么解决:在网页布局中可能会遇到这样的问题，那就是在图片的下面会出现空白，这种现象一般只会在IE6浏览器中出现，不过在火狐下也有可能会出现，这种现象在很多情况下都会严重影响网页的美观度，下面就介绍一下如何消除此种现象。解决方案一:将转换为块级元素，例如: img {display:block;}以上方式可以解决此问题。解决方案二:使用vertical-align属性来实现此效...
如何用CSS去除图像的背景
我的博客，不一样的自我表达
04-04 750
只需一行CSS代码，您就可以实现这种效果，而不需要任何花哨的软件或复杂的工具。在这个适合初学者的指南中，我们将逐步介绍使用 CSS 删除图像背景的步骤。这是我的 html 代码，你可以看到我的图像有一个写入背景，而我的 html 正文有一些其他背景颜色，我需要删除这个白色背景并希望使其透明。现在，如果我想删除图像的背景，我只需添加一行代码即可mix-blend-mode: multiply;只需一行简单的 CSS，您就可以轻松删除网页上图像的背景。您还可以将其添加到您的图像中，检查它是否适合您。
CSS3-案例-去掉图片底部空白缝隙
weixin_54021642的博客
06-23 198
去掉图片底部空白缝隙
如何解决div里面img图片下方有空白的问题？（实用、赞）
chelen_jak的专栏
04-24 900
原文出处：https://jingyan.baidu.com/article/7082dc1c69dc6fe40a89bdfe.html 相信网站前端开发者可能会遇到这样的问题，<div><img src="picture.png"/></div>这样的格式在html5的文档标准下会有一段空白区域，那么怎样去掉这部分空白区域呢？ 方法/步骤 1、首先...
仅使用 CSS 从图像中删除背景
我的博客，不一样的自我表达
05-19 937
与使用编辑过的图像相比，此技术可提供更大的设计灵活性、改进的性能和更好的 SEO 优势。在这篇对初学者友好的博文中，我们将学习如何仅使用 CSS，特别是 mix-blend-mode 属性从图像中删除背景。mix-blend-mode 是一个 CSS 属性，用于定义元素的内容应如何与元素的父元素及其背景的内容混合。有了这个，您可以根据元素的直接背景为元素的部分内容创建漂亮的混合和颜色查看这篇文章。在这种情况下，您可以使用 mix-blend-mode 属性删除纯色背景并创建透明背景的外观。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Java全栈开发架构师

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

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

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

打赏作者

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

抵扣说明：

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

余额充值