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实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
关于crontab的使用详解
2013/06/24 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PDO::commit讲解
2019/01/27 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
Javascript实现字数统计
2015/07/03 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
python实现在sqlite动态创建表的方法
2015/05/08 Python
python简单实现基数排序算法
2015/05/16 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
年终晚会主持词
2014/03/25 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
python学习之panda数据分析核心支持库
2021/05/07 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android