方案一: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. 你真的理解Python中MRO算法吗?[转]

    [前言] MRO(Method Resolution Order):方法解析顺序.Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多问题,比如二义性,Python中 ...

  2. Flume架构以及应用介绍[转]

    在具体介绍本文内容之前,先给大家看一下Hadoop业务的整体开发流程: 从Hadoop的业务开发流程图中可以看出,在大数据的业务处理过程中,对于数据的采集是十分重要的一步,也是不可避免的一步,从而引出 ...

  3. Altium Designer学习---如何进行SI仿真

    Altium designer 如何进行SI仿真. 1.仿真电路中需要至少一块集成电路: 2.器件的IBIS模型: 3.在规则中必须设定电源网络和地网络: 4.建立SI规则约束: 5.层堆栈必须设置正 ...

  4. 关于Cocos的内存管理机制引发一些异常的解决方案

    错误:引发了异常: 读取访问权限冲突. this 是 0xDDDDDDDD.或者hero是 0xDDDDDDDD.hero是在GameController里创建的对象 这个的意思是this所指向的内存 ...

  5. 使用 maven 自动将源码打包并发布

    1.maven-source-plugin 访问地址 在 pom.xml 中添加 下面的 内容,可以 使用 maven 生成 jar 的同时 生成 sources 包 <plugin> & ...

  6. nginx 内置变量

    http://blog.sina.com.cn/s/articlelist_1834459124_1_1.html  nginx内置变量杂谈 http://nginx.org/en/docs/http ...

  7. python什么时候加self,什么时候不加self

    1.self是什么,一般都说指对象本身,这样说了没了用,说了后还是很难懂,因为这样说了后,仍然完全搞不清楚,什么时候变量前需要加self,什么时候不需要加self. 造成很多人,已经怕了self,不停 ...

  8. cocos2dx添加新的类后出现错误undefined reference to的解决办法

    使用cocos compile -p android编译cocos2dx项目的时候出现如下错误(新建了TestScene.h,TestScene.cpp): jni/../../Classes/App ...

  9. 【Zookeeper系列】ZooKeeper安装配置(转)

    原文链接:https://www.cnblogs.com/sunddenly/p/4018459.html 一.Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪 ...

  10. HBase多条件及分页查询的一些方法

    HBase是Apache Hadoop生态系统中的重要一员,它的海量数据存储能力,超高的数据读写性能,以及优秀的可扩展性使之成为最受欢迎的NoSQL数据库之一.它超强的插入和读取性能与它的数据组织方式 ...