HTML5中图片之间的缝隙完美解决方法
发布时间:2017-07-07 15:53:27 作者:佚名 我要评论
最近做h5的项目,碰到了一个百思不得其解的问题,几个img标签中间有大约3px的空隙 ,效果非常不好,纠结了半天终于解决了,下面小编给大家分享HTML5中图片之间的缝隙完美解决方法,需要的的朋友参考下吧
最近做h5的项目,碰到了一个百思不得其解的问题,几个img标签中间有大约3px的空隙
如图:
后来百度查了一番,大致了解了原因,是因为浏览器把元素当成了字,空隙是给一些对齐字母后仍然长出一截的(例如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中图片之间的缝隙完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
在 HTML5 中,文档对象(即 document 对象)具有一个 visibilityState 属性,该属性表示当前文档对象的可见性状态,这篇文章主要介绍了HTML5中的DOCUMENT.VISIBILITYSTATE2023-05-05- 表格是常见的数据统计的一种形式,合并单元格及合并表头经常在复杂表格中遇到,本文主要介绍了html原生table实现合并单元格以及合并表头的示例代码,感兴趣的可以了解一下2023-04-28
- 分时大盘回顾功能是一种用于分析股票行情的工具,本文就介绍一下HTML5 Canvas 绘制股市走势图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习2023-04-25
- 开发uni-app的编辑器HBuilderX可以将H5项目打包成APP,相信很多小伙伴还不知道这个功能,下面将介绍下如何将H5打包成APP,感兴趣的朋友一起看看吧2023-04-03
- 本文将介绍移动端H5实现拍照功能的两种方法:使用HTML5的input标签和使用第三方插件,帮助读者更好地理解和掌握移动端H5拍照功能的实现,感兴趣的可以了解一下2023-03-30
- 普通的显示数据的时候,ul就是项目列表,li就是列表项,可以用来显示数据,如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度、行间距、背景2023-02-20
- 本文主要介绍了Html5播放器实现倍速播放的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习2023-01-12
- 在HTML5中,可以使用Web Worker创建一个后台线程执行一个耗时任务,本文主要介绍了HTML5 Web Worker(多线程处理),感兴趣的可以了解一下2023-01-12
- 短视频已经无数不在了,但是主体还是使用 app 来承载的,本文讲述 H5 如何实现 app 的视频滑动体验,本文对实现过程中踩到的坑做一个总结,结合示例代码给大家介绍的非常详2023-01-05
- 这篇文章主要介绍了HTML5页面打开微信小程序功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-20
最新评论