HTML5中图片之间的缝隙完美解决方法


Posted in HTML / CSS onJuly 07, 2017

最近做h5的项目,碰到了一个百思不得其解的问题,几个img标签中间有大约3px的空隙

如图:

HTML5中图片之间的缝隙完美解决方法 

后来百度查了一番,大致了解了原因,是因为浏览器把元素当成了字,空隙是给一些对齐字母后仍然长出一截的(例如j,g)预留的。也找到了几种解决方法,亲测可行。

1,把body的font-size 设置成0;
 

这样做的时候要记得下面写div的时候给元素指定字号。

2,把

<img src="assets/img/turntable/lucky-turntable_07.jpg">
    <img src="assets/img/turntable/lucky-turntable_11.png" >
    <img src="assets/img/turntable/lucky-turntable_08.jpg">

写成

<img src="assets/img/turntable/lucky-turntable_07.jpg"><img src="assets/img/turntable/lucky-turntable_11.png"><img src="assets/img/turntable/lucky-turntable_08.jpg">

也就是说,把img标签写在同一行,中间不要有空格;

以上所述是小编给大家介绍的HTML5中图片之间的缝隙完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 #HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 #HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 #HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 #HTML / CSS
浅析HTML5中的 History 模式
Jun 22 #HTML / CSS
常用的HTML5列表标签
Jun 20 #HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 #HTML / CSS
You might like
PHP与javascript对多项选择的处理
2006/10/09 PHP
php curl的深入解析
2013/06/02 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python WindowsError的错误代码详解
2017/07/23 Python
有趣的python小程序分享
2017/12/05 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
职专应届生求职信
2013/11/16 职场文书
政府信息公开实施方案
2014/05/09 职场文书
读后感作文评语
2014/12/25 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS