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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 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年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
php中cookie的作用域
2008/03/27 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
微信小程序实现签到弹窗动画
2020/09/21 Javascript
python字符串替换的2种方法
2014/11/30 Python
Python字符串替换实例分析
2015/05/11 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
python 自动识别并连接串口的实现
2021/01/19 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
程序员机试试题汇总
2012/03/07 面试题
先进基层党组织事迹材料2016
2016/02/29 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS