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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP的引用详解
2015/02/22 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python 异常处理总结
2016/10/18 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
大学生毕业求职简历的自我评价
2013/10/24 职场文书
销售经理工作职责范文
2013/12/03 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
专职安全员岗位职责
2015/04/11 职场文书
介绍信范文大全
2015/05/07 职场文书
行政申诉状范文
2015/05/20 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python