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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php实现的日历程序
2015/06/18 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
pycharm安装图文教程
2017/05/02 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python梯度下降法的简单示例
2018/08/31 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
三八妇女节慰问信
2015/02/14 职场文书
创业计划书之干洗店
2019/09/10 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
使用Springboot实现健身房管理系统
2021/07/01 Java/Android