在写css的时候经常会遇到这样的情况,两张宽度加起来是2n的图片,在宽度为2n的容器中放不下,这是因为两张图片之间有一段间隙的缘故,产生这种现象的原因是浏览器把两个img标签之间的空格当成了空白节点。

解决方法:

1.多个img标签写在一行

<img src="/i/eg_tulip.jpg"  alt="flower" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="flower" height="100px"/>
<img src="/i/eg_tulip.jpg"  alt="flower" height="100px"/><img src="/i/eg_tulip.jpg"  alt="flower" height="100px"/>

效果前:

效果后:

2.在img标签的父级上写:font-size:0;//这个在解决display:inline-block出现的问题也有帮助

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

效果:

3.使用display:block(img是内联元素)//要float一下才行

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

效果:

4.使用letter-spacing属性

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

效果:

css怎样去掉多个Img标签之间的间隙的更多相关文章

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

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  2. css 图片有间隔多个Img标签之间的间隙

    今天写css时发现,图片加起来刚好是900px的三张图片,不能在一个900px宽容器放下,因为图片之间有间隔,我猜是浏览器把两个img标签之间的空格当成了空白节点. 在网上找到了几个不错的解决方法: ...

  3. 正则去掉html标签之间的空格、换行符、tab符,但是保留html标签内部的属性空格

    今天遇到一个比较少见的去空格: 正则去掉html标签之间的空格.换行符.tab符,但是保留html标签内部的属性空格 JS 举例: "<a href='baidu.com' name= ...

  4. 范仁义html+css课程---2、html常用标签

    范仁义html+css课程---2.html常用标签 一.总结 一句话总结: html常用的标签有 标题标签.div.span.p.hr.br标签 等 1.html中的标题标签有哪些? <h1& ...

  5. HTML 网页开发、CSS 基础语法——七.HTML常用标签

    标题标签(h1-h6) 1.标题标签 ① 标题(Heading),通过<h1>-<h6>六个标签分别来对六个级别的标题进行性定义的. ② <h1>是级别最高,也是字 ...

  6. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  7. 去掉所有的html标签

    去掉所有的HTML标签:$text=preg_replace('/<[^>]+>/','',$text); 去掉<img>标签:$text=preg_replace('/ ...

  8. 5种方法去掉HTML中Inline-Block元素之间的空白

    5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...

  9. atitit.基于组件的事件为基础的编程模型--服务器端控件(1)---------服务器端控件和标签之间的关系

    atitit.基于组件的事件为基础的编程模型--服务器端控件(1)---------服务器端控件和标签之间的关系 1. server控件是要server了解了标签.种类型的server控件: 1 1. ...

随机推荐

  1. python永久添加第三方模块,PYTHONPATH的设置

    今天用pip安装pymysql后遇到了一个问题,在PyCharm中import pymysql模块时,运行却提示我找不到pymysql mudule 我先考虑的是pymysql没有安装成功,但是cmd ...

  2. Python实例---模拟微信网页登录(day2)

    第三步: 实现长轮询访问服务器---day2代码 settings.py """ Django settings for weixin project. Generate ...

  3. route命令详解与使用实例 ,同时访问内外网

    route命令详解与使用实例     2011-10-18 12:19:41|  分类: 其他 |  标签:route   |字号 订阅   1.   使用背景 需要接入两个网络,一个是部署环境所在内 ...

  4. Beta阶段第四次冲刺

    Beta阶段第四次冲刺 严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正在进 ...

  5. Debian apt-get 用法

    (说明:sudo--使用超级管理员权限进行apt-get ; packagename--代表安装的软件包名) sudo apt-get update —— 在修改/etc/apt/sources.li ...

  6. aused by: org.apache.xmlbeans.SchemaTypeLoaderException: XML-BEANS compiled schema: Incompatible min

    版权声明:转载请注明出处 https://blog.csdn.net/seashouwang/article/details/24025871 6.导入Word2007-docx,Excel-2007 ...

  7. python利用smtplib和MIMETYPE发送邮件

    # -*- coding:utf- -*- import smtplib from email.mime.text import MIMEText sender = '你的发送邮件' my_pass= ...

  8. Block abstraction view(Create & Reference)

    在hierarchical design 中,一般需要调用 hard macro,top调用 macro 的方法有多种: 1. 调用macro对应的db 2. 调用 macro 的 ilm 模型(20 ...

  9. Python2.7-string模块

    string模块 1.模块内定义的常数 字母(ascii_letters.letters),数字(digits.hexdigits.octdigits),空格(whitespace),大小写(asci ...

  10. day73

    今日内容:  1基于双下划线的跨表查询   套路一样,用__跨表   -一对多    -多对多 # 北京出版社出版的所有图书 res = models.Publish.objects.filter(n ...