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 透明色 RGBA使用介绍
Aug 06 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
html5简介及新增功能介绍
May 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
Python抽象类的新写法
2015/06/18 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python的unittest测试类代码实例
2017/12/07 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
Java中compareTo和compare的区别
2016/04/12 面试题
新闻学毕业生自荐信
2013/11/15 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
规划编制实施方案
2014/03/15 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
《童年的发现》教学反思
2016/02/18 职场文书