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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
box-shadow单边阴影的实现
May 21 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循环结构实例讲解
2014/02/10 PHP
php中的ini配置原理详解
2014/10/14 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
简单谈谈python的反射机制
2016/06/28 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Django  ORM 练习题及答案
2019/07/19 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python3实现单目标粒子群算法
2019/11/14 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
python切割图片的示例
2020/11/12 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
个人合伙协议书范本
2014/10/14 职场文书
童年读书笔记
2015/06/26 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA