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-sizing属性
Apr 17 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
Vue和React有哪些区别
2020/09/12 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python中模块查找的原理与方法详解
2017/08/11 Python
TensorFlow的权值更新方法
2018/06/14 Python
python批量赋值操作实例
2018/10/22 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python数据挖掘需要学的内容
2019/06/23 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
简单介绍Object类的功能、常用方法
2013/10/02 面试题
使用索引有什么好处
2016/07/27 面试题
一道Delphi上机题
2012/06/04 面试题
小学教师寄语大全
2014/04/03 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
英文版辞职信
2015/02/28 职场文书
员工离职证明范本
2015/06/12 职场文书
《搭石》教学反思
2016/02/18 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP