多个Img标签之间的间隙处理方法

简介:

1.多个标签写在一行

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>

效果前:

效果后:

 

 

2.将要闭合标签的地方与开始标签的地方重合

<img src="/i/eg_tulip.jpg"   alt="郁金香" height="100px"
/><img src="/i/eg_tulip.jpg"   alt="郁金香" height="100px" />

 

3.使用注释头尾相连

<img src="/i/eg_tulip.jpg"   alt="郁金香" height="100px"/><!--
--><img src="/i/eg_tulip.jpg"   alt="郁金香" height="100px" />

 

 

4.在img标签的父级上写:font-size:0;

<div style="font-size:0">
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
</div>

效果:

 

5.使用display:block(img是内联元素)

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>

效果:

 

6.使用letter-spacing属性

<div style="letter-spacing:-800px"><!--letter-spacing的值无论是负多少都不会产生重叠-->
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
</div>        

效果:

 

7.问:为什么<img/>标签之间有间隙,请知道的博友不吝赐教!谢谢。

转载:http://www.cnblogs.com/zqzjs/p/4868325.html

目录
相关文章
|
5天前
|
云安全 人工智能 安全
AI被攻击怎么办?
阿里云提供 AI 全栈安全能力,其中对网络攻击的主动识别、智能阻断与快速响应构成其核心防线,依托原生安全防护为客户筑牢免疫屏障。
|
15天前
|
域名解析 人工智能
【实操攻略】手把手教学,免费领取.CN域名
即日起至2025年12月31日,购买万小智AI建站或云·企业官网,每单可免费领1个.CN域名首年!跟我了解领取攻略吧~
|
9天前
|
安全 Java Android开发
深度解析 Android 崩溃捕获原理及从崩溃到归因的闭环实践
崩溃堆栈全是 a.b.c?Native 错误查不到行号?本文详解 Android 崩溃采集全链路原理,教你如何把“天书”变“说明书”。RUM SDK 已支持一键接入。
606 214
|
存储 人工智能 监控
从代码生成到自主决策:打造一个Coding驱动的“自我编程”Agent
本文介绍了一种基于LLM的“自我编程”Agent系统,通过代码驱动实现复杂逻辑。该Agent以Python为执行引擎,结合Py4j实现Java与Python交互,支持多工具调用、记忆分层与上下文工程,具备感知、认知、表达、自我评估等能力模块,目标是打造可进化的“1.5线”智能助手。
849 61
|
7天前
|
人工智能 移动开发 自然语言处理
2025最新HTML静态网页制作工具推荐:10款免费在线生成器小白也能5分钟上手
晓猛团队精选2025年10款真正免费、无需编程的在线HTML建站工具,涵盖AI生成、拖拽编辑、设计稿转代码等多种类型,均支持浏览器直接使用、快速出图与文件导出,特别适合零基础用户快速搭建个人网站、落地页或企业官网。
1253 157
|
4天前
|
编解码 Linux 数据安全/隐私保护
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
教程分享免费视频压缩软件,免费视频压缩,视频压缩免费,附压缩方法及学习教程
241 138
|
7天前
|
存储 安全 固态存储
四款WIN PE工具,都可以实现U盘安装教程
Windows PE是基于NT内核的轻量系统,用于系统安装、分区管理及故障修复。本文推荐多款PE制作工具,支持U盘启动,兼容UEFI/Legacy模式,具备备份还原、驱动识别等功能,操作简便,适合新旧电脑维护使用。
522 109