Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >一句代码消除img标签之间的间隙

一句代码消除img标签之间的间隙

作者头像
于飞云计算
修改于 2019-08-27 02:47:03
修改于 2019-08-27 02:47:03
1.9K00
代码可运行
举报
文章被收录于专栏:技术经验分享技术经验分享
运行总次数:0
代码可运行

今天写css时发现图片与图片之间有一行空白间隙,全百科网就在网上找到了几个不错的解决方法,发现很多方法都太实用,而且代码复杂,通过不懈努力,终于克服了这个难题,只需要一句样式代码即可搞定。

问题描述

代码示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style type="text/css">
    img{
        vertical-align:left;
        display:block;
        height: 100%;
        width: 100%
    }
    </style>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <img src="./images/quanbaike.com_01.jpg">
    <img src="./images/quanbaike.com_02.jpg">

以上代码,在前端浏览时quanbaike.com_01.jpg与quanbaike.com_02.jpg上下之间是有一行白条的间隙。

消除间隙

如何消除这个间隙呢?

全百科网通过网上诸多代码测试实践之后,终于找到了一段神奇的代码,不仅简短,而且还可以非常有效的消除img标签之间的间隙,

示例代码

给img标签添加样式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
img{
 vertical-align:left;
    display:block;
}

是不是发现已经没有了间隙。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
利用vertical-align:middle实现在整个页面居中
如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。
跟着阿笨一起玩NET
2018/09/20
1.6K0
利用vertical-align:middle实现在整个页面居中
CSS中的vertical-align跟line-height相互作用
其中,有个属性值暴露了vertical-align和line-height之间的基友关系,大家猜猜看是哪个属性值?
javascript.shop
2019/09/04
9340
CSS中的vertical-align跟line-height相互作用
收集两种垂直居中的代码
本文介绍了如何实现浏览器兼容性的几种方法,包括使用CSS hack、使用CSS reset、使用CSS前缀、使用DOCTYPE、使用svg、使用canvas和CSS flex。这些方法可以帮助开发者解决不同浏览器之间的兼容性问题,提高开发效率和用户体验。
练小习
2017/12/29
9020
灵异留白事件——图片下方无故留白
本人在实践过程中偶尔遇见此等不解的状况,但往往睁一只眼闭一只眼,采取另外的方式了,而今看到原博主的一篇文章,大受启发,希望对各位博友也有所帮助~
超然
2018/08/03
1.9K0
灵异留白事件——图片下方无故留白
仿英雄联盟网页HTML代码 学生网页设计与制作期末作业下载 大学生网页设计与制作成品下载 DW游戏介绍网页作业代码下载
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发
IT司马青衫
2022/08/14
1.2K0
仿英雄联盟网页HTML代码 学生网页设计与制作期末作业下载 大学生网页设计与制作成品下载 DW游戏介绍网页作业代码下载
div 或 span 的高度比 img 的高度要多3px。如何解决?
如果将一个 img 放在 div 或 span 里面,你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0,无效!那么怎么解决这个问题呢?
用户9914333
2022/07/22
2.1K0
div 或 span 的高度比 img 的高度要多3px。如何解决?
垃圾分类网页制作 垃圾分类网页设计作业 HTML CSS垃圾分类网页模板 大学生垃圾分类网站毕业设计 DW垃圾分类网页模板下载 垃圾分类网页成品代码 环保网页作
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师,
IT司马青衫
2022/08/19
1.1K0
垃圾分类网页制作 垃圾分类网页设计作业 HTML CSS垃圾分类网页模板 大学生垃圾分类网站毕业设计 DW垃圾分类网页模板下载 垃圾分类网页成品代码 环保网页作
纯代码给WordPress网站手机端底部添加菜单栏功能
前段时间突发奇想,想给自己的WordPress网站手机端底部加个菜单栏,但是怎么实现呢,于是全百科网研究了两天终于有了办法,所以今天就分享给大家如何实现。
于飞云计算
2019/07/22
1.3K0
前端基础篇之CSS世界
我想你每天写css代码有时候也会觉得很痛苦:这个布局的css怎么这么难实现!我也经常会有这种感觉,一个看似简单的布局总是要琢磨半天才能实现,偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形,并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》,才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记,为缩减篇幅丢弃了张老师冗余的小幽默,丢掉了些含金量较低的章节内容,因为ie已经被淘汰出局,所以有关css兼容性的地方也全部忽略不记,同时对个人觉得不易理解的地方加上了一些自己的理解和验证,所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具,国内镜像站点,方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新,希望到最后能够文如标题展现出真正的css世界。
Nealyang
2019/10/14
2.2K0
前端基础篇之CSS世界
大一学生《Web前端网课作业》基于HTML+CSS自我介绍网页设计与制作
<font color='#16c60c' size='5px'> 🎉精彩专栏推荐👇🏻👇🏻👇🏻 </font> ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
IT司马青衫
2022/08/14
2K0
大一学生《Web前端网课作业》基于HTML+CSS自我介绍网页设计与制作
HTML【知识问答】
文章目录 一、行内元素有哪些?块级元素有哪些? 二、解释一下CSS盒子模型。 三、CSS选择符优先级算法如何计算? 四、简述清除浮动的几种方式: 五、一个盒子不给宽高如何水平垂直居中。 六、写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。 ---- 一、行内元素有哪些?块级元素有哪些? 块级元素: h1-h6 : 1-6级标题 p : 段落 div : 定义文档中的节 ul : 定义无序列表 ol
MIKE笔记
2023/03/23
8620
纯代码给WordPress文章添加卡片式内链的方法
写文章的时候会经常文章中引用其他文章链接,是为了让用户方便浏览,也增加文章关联度;更重要的是适当的引用文章,也可以让内容更加丰满,对用户体验上也是有提高;但是常规的文章内链一般就是直接放一个链接进去,干巴巴的一个链接不管是美观度还是用户体验都不是很好,所有全百科网搞了个简约美观的卡片内链样式。
于飞云计算
2019/07/22
1.4K0
纯代码给WordPress文章添加卡片式内链的方法
电商项目(上)
:nth-last-child(n): 选择器匹配属于其元素的第n个子元素的每个元素
达达前端
2019/07/03
3.9K0
电商项目(上)
左侧/右侧悬浮视频广告代码分享 超精简版
访问本文章时已经看到右侧悬浮的小姐姐们的视频了吧,想不想把小姐姐搬到你的网站上呢?别着急,全百科网这就把此功能的核心代码与样式代码分享给你哈。
于飞云计算
2019/07/02
2.3K0
左侧/右侧悬浮视频广告代码分享 超精简版
49个常用的CSS代码片段,建议整理收藏
text-shadow 为网页字体添加阴影,通过对text-shadow属性设置相关的属性值。
前端达人
2021/07/16
2.3K0
关于 vertical-align 你应该知道的一切
vertical-align,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,垂直对齐,主要目的用于将相邻的文本与元素对齐。MDN 中对它的定义如下:
政采云前端团队
2020/03/19
3K0
关于 vertical-align 你应该知道的一切
暑期生鲜商城静态
background-size:100%;总是X轴100%铺满整个容器,Y轴可能被裁剪会出现空白填不满部分,图片不变形。 background-size:100% 100%;图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器,图片可能会变形。 background-size:cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器,但图片超出容器部分会被裁剪掉,图片不变形。 background-size:contain;图片保持比例放大或缩小填充容器,若不能完整填充容器,X轴或Y轴都有可能出现白边,图片不变形。
姜姜178
2022/11/18
3470
暑期生鲜商城静态
静态HTML个人音乐网页 大学生网页设计作业 简单音乐娱乐网页制作 DW个人网站模板下载 大学生简单音乐网页作品代码
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师
IT司马青衫
2022/08/18
5820
静态HTML个人音乐网页 大学生网页设计作业 简单音乐娱乐网页制作 DW个人网站模板下载 大学生简单音乐网页作品代码
前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素的显示与隐藏…[通俗易懂]
2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性 来设置 元素的位置
全栈程序员站长
2022/09/02
3.6K0
CSS常见兼容性问题总结
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。
书童小二
2018/09/03
1.2K0
CSS常见兼容性问题总结
推荐阅读
相关推荐
利用vertical-align:middle实现在整个页面居中
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验