方案一: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. Halcon 彩色图片通道分割处理

    1.RGB通道:R红色,G绿色,B蓝色:R.G.B各占一个字节,取值范围在0—255:可代表的颜色数256*256*256==2^24 黑色区域是:R=G=B=0;   白色区域是:R=G=B=255 ...

  2. Mysql分组查询group by语句详解

    (1) group by的含义:将查询结果按照1个或多个字段进行分组,字段值相同的为一组(2) group by可用于单个字段分组,也可用于多个字段分组 select * from employee; ...

  3. js上传

    有时候需要显示进度,这时候就需要做一些切割,具体上传代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head&g ...

  4. Windows下Codeblocks调试Cocos2d-x项目体验(一次失败的体验)

    很久之前的一篇文章有介绍过在Ubuntu下安装Cocos2d-x3.11并使用Codeblock调试Cocos2d-x程序:http://www.cnblogs.com/moonlightpoet/p ...

  5. Oracle中的NULL、’’(空字符串)以及’_’(空格)

    本文首发于 http://youngzy.com/ 在Oracle中使用 null,''(空字符串),'_'(空格)时,有没有遇到问题?产生疑惑? null和’’(空字符串)是一个意思 注: 为了便于 ...

  6. a排兵布阵

    来源hdu1166 C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵 ...

  7. unable to create ...erroractionpreference....

    Docker on windows 10 can't startup after deleting MobyLinuxVM in Hyper-V manually 重新启动hyper-v就可以解决了

  8. Content-Length mismatch, received 431737 bytes out of the expected 760836

    可能原因是 composer 的安装包网址是国外镜像所致,被长城防火墙屏蔽了.可执行以下命令来解决:composer config -g repo.packagist composer https:/ ...

  9. poj3723_Conscription

    Conscription Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12393   Accepted: 4350 Des ...

  10. react 使用 react-loadable分包

    文档 yarn add react-loadable 使用 import Loadable from "@/components/loadable"; const Home = L ...