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

1.多个img标签写在一行

<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标签的父级上写: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>

效果:

3.使用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"/>

效果:

4.使用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>        

效果:

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

时间: 2024-08-02 06:59:25

多个Img标签之间的间隙处理方法的相关文章

解决img标签上下出现间隙的方法

图片与父元素下边缘有 2px 的间隙,并不是因为空格.多个 inline-block 元素之间的间隙才是因为空格. 任何不是块级元素的可见元素都是内联元素,其表现的特性是"行布局"形式.----<CSS权威指南> 如图片文字等内联元素,它默认对齐方式都是和它的父级的 baseline 去进行对齐的,但是你对齐的是 baseline,撑开高度的却是元素整体的高度(bottom line),这样肯定就会造成一定的间隙 1.第一种解决方案既然是 inline 元素才会发生这个问题

[原创]ie6,7中td和img之间有间隙

情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原因 1.td,img之间margin,padding设置不正确?    显然不是,如果设置了margin和padding其他浏览器应该也出现间隙. 2.前台页面顶部没有<!DOCTYPE html >之类的标签文档声明?    通过检查,已经设置了该文档标签. 3.是不是IE6,IE7对TD和IM

用来实现对紧邻的相同的标签元素的内容和两对标签之间的非标签内容进行合并

源文件: <?xml version="1.0" encoding="UTF-8"?> <Body> <Title>4月7日凌晨5时,近300名穿着"警察"制服</Title> <ReportTime type="absTime">2014年4月11日07:00</ReportTime> <Content> <Paragraph>

去除行块级标签之间的默认间距

当两个行块级标签之间有空格,或者换行时,行块级标签之间会有一个默认4px的间距.去除方法如下: 给行块级标签的父级设置:font-size: 0: 在给相应的行块级标签设置需要的 font-size: 如下所示: <style> .parent{ font-size: 0; } .parent span{ display: inline-block; font-size: 14px; } </style> <div class="parent"> &

web前端_表格table布局,同一列两个&lt;td&gt;之间有间隙解决办法。

同学接了个很简单的网站.结果在布局的时候发现网页头部和网页主体之间差不多有1px的间隙.怎么也去除不了,帮忙看了看,隋记录下来,是这样的,网页头部和主体分别在两个<td>中(使用table布局),贴上简单demo: 效果如下,间隙消失了,最重要的是红色矩形圈起来的那句. 如果去掉红色矩形圈起来的部分,效果如下: web前端_表格table布局,同一列两个<td>之间有间隙解决办法.

关于li标签之间的间隔如何消除!

问题:li标签用了display:inline之后虽然成功的合并在一行,但是li标签之间出现了间距. 原因:按enter键换行之后li标签之间存在着空格,正是这些空格占据了li标签之间的空间. 解决方案:1.将li标签之间用注释填补 <li>内容</li><!--  --><li>内容</li> 2.将ul标签属性 设置为font-size = 0,然后再设置li标签的 font-size属性: 3.li选择器中加入 float: left; 让

如何添加一个空间引导同时选中复选框和标签之间

我试图添加20px复选框和标签之间的空间引导同时选中复选框列表下面使用CSS,但不幸的是,它没有得到应用. HTML <body><select size="5" name="lstStates" multiple="multiple" id="lstStates"><option value="NJ">New Jersey</option><optio

javascript提取标签之间的信息

下面的代码提取标签之间的信息,可以应付一般的任务 var pt = function (s) { document.writeln("<br>" + s); }; var m = "wabc ss ab xx<div><h1>div</h1></div>ss<div>div2</div>"; function getTagContent(tg){ var str = "&l

去除inline-block元素间间隙的方法

对于inline-block元素,如几个设置为display:inline-block的span元素,在ie6.7中显示无间隙,在其他ie版本和高级浏览器中显示有间隙. <div> <span></span> <span></span> </div> span{ width: 50px; height: 50px; border: 1px solid red; display: inline-block; vertical-align