css怎样去掉多个Img标签之间的间隙
在写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标签之间的间隙的更多相关文章
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- css 图片有间隔多个Img标签之间的间隙
今天写css时发现,图片加起来刚好是900px的三张图片,不能在一个900px宽容器放下,因为图片之间有间隔,我猜是浏览器把两个img标签之间的空格当成了空白节点. 在网上找到了几个不错的解决方法: ...
- 正则去掉html标签之间的空格、换行符、tab符,但是保留html标签内部的属性空格
今天遇到一个比较少见的去空格: 正则去掉html标签之间的空格.换行符.tab符,但是保留html标签内部的属性空格 JS 举例: "<a href='baidu.com' name= ...
- 范仁义html+css课程---2、html常用标签
范仁义html+css课程---2.html常用标签 一.总结 一句话总结: html常用的标签有 标题标签.div.span.p.hr.br标签 等 1.html中的标题标签有哪些? <h1& ...
- HTML 网页开发、CSS 基础语法——七.HTML常用标签
标题标签(h1-h6) 1.标题标签 ① 标题(Heading),通过<h1>-<h6>六个标签分别来对六个级别的标题进行性定义的. ② <h1>是级别最高,也是字 ...
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- 去掉所有的html标签
去掉所有的HTML标签:$text=preg_replace('/<[^>]+>/','',$text); 去掉<img>标签:$text=preg_replace('/ ...
- 5种方法去掉HTML中Inline-Block元素之间的空白
5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...
- atitit.基于组件的事件为基础的编程模型--服务器端控件(1)---------服务器端控件和标签之间的关系
atitit.基于组件的事件为基础的编程模型--服务器端控件(1)---------服务器端控件和标签之间的关系 1. server控件是要server了解了标签.种类型的server控件: 1 1. ...
随机推荐
- Windows 2012桌面显示“我的电脑”
Windows 2012桌面显示“我的电脑” rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0
- Qt: QAction在QToolBar中快捷键行为注意事项
在QMenuBar中添加快捷键很简单,只要在text的特定字母前加&,如&k按下ALT+k即会触发(QPushButton也是一样).但在QToolBar则不然,需要调action-& ...
- WaitForMultipleObjects
WaitForMultipleObjects是Windows中的一个功能非常强大的函数,几乎可以等待Windows中的所有的内核对象 函数原型为: DWORD WaitForMultipleObjec ...
- 第二次项目冲刺(Beta版本)
第二次项目冲刺(Beta版本) 团队作业7--第二次项目冲刺(Beta版本)day1 http://www.cnblogs.com/wj946/p/8017787.html 团队作业7--第二次项目冲 ...
- 3.Solr4.10.3目录结构
转载请出自出处:http://www.cnblogs.com/hd3013779515/ 1.整个目录结构 (1)bin:是脚本的启动目录 (2)contrib:第三方包存放的目录 (3)dist:编 ...
- vue2.0学习笔记之组件
[易错点]: 1. 组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2. 组件名称采用横杠间隔命名时,第一个字母大写会报错. 写法一:全局 ...
- world转html在线编辑器
轻量富文本编辑器插件:http://fex.baidu.com/ueditor/ http://ueditor.baidu.com/website/onlinedemo.html
- ftp传输文件到指定服务器
#!/bin/bash filePrefix="dbname"localDir="/DBBackup"remoteDir="/Backup" ...
- jQuery 使用ajax,并刷新页面
<script> function del_product_information(id) { $.ajax({ url: "{% url 'del_product_inform ...
- PHPer是草根吗
以下文字并没有非常多的技术词汇,所以只要对PHP感兴趣的人都可以看看. PHPer是草根吗? 从PHP诞生之日起,PHP就开始在Web应用方面为广大的程序员服务.同时,作为针对Web开发量身定制的脚本 ...