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的transform做的动态时钟效果
Sep 21 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
使用CSS实现音波加载效果
May 07 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
js实现简单的验证码
2015/12/25 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
详解django2中关于时间处理策略
2019/03/06 Python
pytorch 共享参数的示例
2019/08/17 Python
如何使用python进行pdf文件分割
2019/11/11 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
Python之Sklearn使用入门教程
2021/02/19 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
2019史上最全Database工程师题库
2015/12/06 面试题
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
优秀英文求职信范文
2015/03/19 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript