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设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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/01/07 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
js字符编码函数区别分析
2011/12/28 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
python django集成cas验证系统
2014/07/14 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
flask框架视图函数用法示例
2018/07/19 Python
python实现简单的文字识别
2018/11/27 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python 字符串追加实例
2019/07/20 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
世界文化遗产导游词
2015/02/13 职场文书
导游词400字
2015/02/13 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
MySQL系列之二 多实例配置
2021/07/02 MySQL
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android