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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 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连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
node.js require() 源码解读
2015/12/13 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
JavaScript实现区块链
2018/03/14 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
python ip正则式
2009/05/07 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
工作睡觉检讨书
2014/02/25 职场文书
读书小明星事迹材料
2014/05/03 职场文书
电子工程求职信
2014/07/17 职场文书
高中学校对照检查材料
2014/08/31 职场文书
计划生育诚信协议书
2014/11/02 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
城南旧事电影观后感
2015/06/16 职场文书
党性修养心得体会2016
2016/01/21 职场文书