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强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 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 xml文件操作实现代码(二)
2009/03/20 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS中数据结构之栈
2019/01/01 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
一套.net面试题及答案
2016/11/02 面试题
超市促销实习自我鉴定
2013/09/23 职场文书
经理职责范文
2013/11/08 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
家长对小学生的评语
2014/01/28 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
平凡的世界读书笔记
2015/06/25 职场文书