方案一: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. C++ 函数模板默认的模板参数

    函数的默认模板参数 你可以为模板参数定义默认值,它们被称作 default template arguments(默认模板参数). 它们甚至可以指向前一个模板参数. 1. 可以直接使用 operato ...

  2. [转]application.properties详解 --springBoot配置文件

    本文转载:http://blog.csdn.net/lpfsuperman/article/details/78287265###; # spring boot application.propert ...

  3. Hlacon 之Image ,Region,XLD

    一 读取的3种方式: read_image( image,'filename') //image 是输出对象,后面是输入文件的路径和名称 读取多图: 1,申明一个数组,分别保存路径 ImagePath ...

  4. [转] 一个小时学会Git

    一个小时学会Git http://www.cnblogs.com/best/p/7474442.html

  5. 视频编码---mjpeg

    http://www.eepw.com.cn/article/201612/333063.htm https://www.cnblogs.com/ikaka/p/4860858.html https: ...

  6. elasticsearch以及head插件在centos7上的安装与配置教程

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  7. Non-zero exit code (1)

    刚报了这个错Non-zero exit code (1) 经排查执行这个命令就好了  python -m pip install --upgrade pip 一定要多看报错,报错中有提示的

  8. [原]CentOS7安装Rancher2.1并部署kubernetes (一)---部署Rancher

    ##################    Rancher v2.1.7  +    Kubernetes 1.13.4  ################ ##################### ...

  9. vim 撤销 回退操作

    在vi中按u可以撤销一次操作 u   撤销上一步的操作Ctrl+r 恢复上一步被撤销的操作 注意:如果你输入“u”两次,你的文本恢复原样,那应该是你的Vim被配置在Vi兼容模式了.重做如果你撤销得太多 ...

  10. PHP计算显示平均温度、五个最低及最高温度

    <?php $month_temp = "78, 60, 62, 68, 71, 68, 73, 85, 66, 64, 76, 63, 81, 76, 73, 68, 72, 73, ...