方案一:div{font-size:0};
方案二:img{ display:block};
方案三:img{vertical-align:top;}
方案四:div{ margin-bottom:-3px };

为什么会有间距呢?

根本原因在于img标签为inline元素,该元素默认垂直对齐方式为以父元素的baseline,但是展示时又是以bottomline为对齐方式,因此造成了上下两个img标签之间的间隙。

解决方法说明

1、将其改变为block元素,但是该方法太过粗暴,相当于从根本上改变了img。

img { display:block};
2、 改变其垂直对齐方式   
img {vertical-align:top;}
3、把父元素的文字大小设置为0
div {font-size:};
4、这个方法不推荐
div { margin-bottom:-3px };
 

如何消除img默认的间距的更多相关文章

  1. CSS:如何清除a标签之间的默认留白间距

    即使我们使用了类似 *{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式,也会发现类似<a>标签这种inline-block元素,它们之间也还存在着间距. de ...

  2. 如何消除inline-block元素间间距问题(转)

    一.现象描述    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...

  3. 修改xshell的默认字间距和行间距

    可能是不小心修改了xshell的某个配置,导致打开的会话中显示字间距和行间距都非常大,严重影响工作.参照官方手册也不能修改正常,详见:http://www.xshellcn.com/wenti/xiu ...

  4. 去掉img与img之间,video与video之间默认的间距(3种方式)

    img,video{ /*第1种方式*/ border:; vertical-align: bottom; /*第2种方式*/ outline-width:0px; vertical-align:to ...

  5. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  6. 纯JS 10分钟 实现图片懒惰加载

    知识点: 1:h5 新增选择器  document.querySelectorAll 2:JS 经典,防抖 3:距离判断:getBoundingClientRect  思路:通过浏览器滚动事件, 判断 ...

  7. 消除ListView, gridview中的选项单击是的默认黄色底色

    要消除其默认的单击底色,只需要在**View定义时为其添加 android:cacheColorHint="#00000000" android:listSelector=&quo ...

  8. [前端]如何写一个水平导航栏?(浮动、inline-block+消除间距)

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  9. 如何去除inline-block的默认间距

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

随机推荐

  1. mac os系统go安装:go install github.com/nsf/gocode: open /usr/local/go/bin/gocode: permission denied

    gocode是go语言代码自动提示工具 安装时进入src目录执行:go get -u github.com/nsf/gocode 出现: github.com/nsf/gocode (download ...

  2. java生成兑换码礼包码--工具类

    import java.util.HashSet; import java.util.Random; import java.util.Set; public class GenSerial { pr ...

  3. application.properties详解 --springBoot配置文件【转载】

    # spring boot application.properties配置的各个属性详解 # 该示例文件作为标准提供.(官方文档 翻译过来的) # 还是花了些功夫翻译,各位如果转发,请留下本文地址, ...

  4. VS IISExpress REST DELETE 405 Method Not Allowed

    [参考].net IIS MVC Rest api 跨域 PUT DELETE 404 无法使用问题解决方案 今日在使用泛型處理常式處理檔案上傳時,使用了 HTTP 動詞的 PUT.DELETE 進行 ...

  5. Linux下配置环境变量—— .bashrc 和 /etc/profile

    转载:https://blog.csdn.net/sun8112133/article/details/79901527 首先简单说一下什么是环境变量?环境变量简单的说就是当前环境下的参数或者变量.如 ...

  6. 浅从System.Web.Http.Owin的HttpMessageHandlerAdapter看适配器模式

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 适配器模式(Adapter) 可用来在现有接口和不兼容的类之间进行适配.有助于 ...

  7. PXE(preboot execution environment):【网络】预启动执行环节:引导 live光盘 ubuntu livecd 18.04+:成功

    比较艰难的成功了. 艰难在于:吱吱吱吱(知知知知知):就是歌init启动参数而已! 最最艰难在于:这个nfs服务器软件有很大的关系.很多时候不是你不行,而是条件不具备 or 条件看似具备但其实有问题 ...

  8. monit检测语法

    1.存在性检测 功能:检测文件或者服务不存在时进行相应的动作,默认是重启 语法: IF [DOES] NOT EXIST [[<X>] <Y> CYCLES]    THEN ...

  9. HTTP简介,http是一个属于应用层的面向对象的协议

    引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1. ...

  10. Ant 批量执行jmeter 脚本

    一.环境准备: 1.Jdk1.6或以上:http://www.oracle.com/technetwork/java/javase/downloads/index.html 命令行输入:java -v ...