• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 图片之间的缝隙解决方法

图片之间的缝隙解决方法

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含方法,解决,缝隙等相关知识,匿名希望在学习及工作中可以帮助到您
在h项目中,几个img标签中间有大约3px的空隙 ,效果非常不好那么如何解决呢?下面小编给大家分享HTML5中图片之间的缝隙完美解决方法,需要的的朋友参考下吧,希望能帮助到大家。

最近做h5的项目,碰到了一个百思不得其解的问题,几个img标签中间有大约3px的空隙

如图:

图片之间有空隙

后来百度查了一番,大致了解了原因,是因为浏览器把元素当成了字,空隙是给一些对齐字母后仍然长出一截的(例如j,g)预留的。也找到了几种解决方法,亲测可行。

1,把body的font-size 设置成0;

这样做的时候要记得下面写p的时候给元素指定字号。

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标签写在同一行,中间不要有空格;

大家学会了吗?赶紧动手尝试一下吧。

相关推荐:

怎样用CSS使图片高度自动缩放比例

html里怎么插入图片

详解css的外边距margin的使用

以上就是图片之间的缝隙解决方法的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 纯HTML5+CSS3制作生日蛋糕(代码易懂)
  • HTML5事件方法全部汇总
  • HTML5 video播放器全屏(fullScreen)方法实例
  • HTML5 Video标签的属性、方法和事件汇总介绍
  • html5 Canvas画图教程(5)—canvas里画曲线之arc方法
  • html5-websocket基于远程方法调用的数据交互实现
  • HTML5如何保存画布?HTML5保存画布方法
  • HTML5 figure标签是什么意思?HTML5 figure标签的使用方法详解
  • HTML5中footer标签的用法你知道吗?,HTML5中的footer标签是什么意思?
  • HTML5 video播放器全屏(fullScreen)实现的方法

相关文章

  • 2018-12-03Canvas的手绘风格图形库Rough.js
  • 2017-08-06详解html5 canvas常用api总结(二)--绘图API
  • 2017-08-06HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
  • 2018-12-03Html5大文件断点续传实现方法_html5教程技巧
  • 2018-12-03html5使用canvas画空心圆与实心圆_html5教程技巧
  • 2018-12-03H5本地存储实例详解
  • 2018-12-03H5新标签浏览器的兼容问题
  • 2018-12-03混合移动开发框架详解
  • 2018-12-03两种常用编程的比较 声明式和命令式
  • 2018-12-03HTML5 Canvas API制作简单的猜字游戏

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 微信的H5页面调用第三方位置导航
    • html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
    • 基于HTML5 Canvas:字符串,路径,背景,图片的详解
    • HTML5本地存储之localStorage、sessionStorage的具体分析
    • 苹果官网新款 Mac Pro 的介绍页面是怎样用 HTML5 做到了如此流畅的动画?
    • HTML5 中的一些有趣的新特性
    • HTML5新增的结构元素有哪些?HTML5新增的结构元素的用法(推荐)
    • H5缓存-Manifest的示例代码分享(图文)
    • HTML5视频支持检测(检查浏览器是否支持视频播放)_html5教程技巧
    • 如何解决微信通过H5页面直接打开本地app

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有