方案一:div{font-size:0};
方案二:img{ display:block};
方案三:img{vertical-align:top;}
方案四:div{ margin-bottom:-3px };
 1.为什么img标签上下会有间隙?。
根本原因在于img标签为inline元素,该元素默认垂直对齐方式为以父元素的baseline,但是展示时又是以bottomline为对齐方式,因此造成了上下两个img标签之间的间隙。
2.如何解决?
(1)img{ display:block};
       将其改变为block元素,但是该方法太过粗暴,相当于从根本上改变了img。
(2)img{vertical-align:top;}
       改变其垂直对齐方式
(3)div{font-size:0};
      把父元素的文字大小设置为0
(4)div{ margin-bottom:-3px };

        这个方法不推荐
 

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

  1. 如何消除inline-block元素之间的间隙?

    一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...

  2. flex布局 justify-content:space-between; 解决最后一排数量不够自动向两端排列问题和flex布局的元素会有默认间隙(垂直间隙)

    1 .flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况 实现效果: 解决方案:使用after伪类, 解决最后一排数量不够两端分布的情况.宽度就是每张图片的宽度 .list:after { ...

  3. CSS消除button标签的默认样式

    button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...

  4. font-size: 0;解决元素间的空白间隙

    看别人的代码看到过font-size:0这个设置,不明白为何这样操作,后来研究一下才明白:这是像素级还原设计稿很有用的设置,因为元素节点有文本节点,在缩进代码时会占据宽度,这么说不好理解,演示如下: ...

  5. 消除input框的默认样式

    input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...

  6. display:inline-block元素间空白间隙问题

    display:inline-block元素间有空白间隙,可以在父元素上加font-size:0

  7. CSS 去掉inline-block元素间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

  8. CSS 去掉inline-block间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

  9. inline-block间隙问题总结, ,style一个样式后面 多加了一个 分号; 导致 样式失效

    1--- 样式最后的{}后面, 不能有分号 ; 2---- display:inline-block 后, 元素间会有间隙    原因:  由换行或者回车导致的. 解决一: 只要把标签写成一行或者标签 ...

随机推荐

  1. EditText制作简单的登录界面

    EditText与之前的TextView和Button的用法大体相同,用法案例如下: activity_edit_text.xml: <?xml version="1.0" ...

  2. SeetaFaceEngine系列1:Face Detection编译和使用

    SeetaFace,根据GitHub上的介绍,就是一个开源的人脸检测.矫正和识别的开源库,是采用C++来编写的,并且是在CPU上执行的,没有用到GPU,但是可以用SSE或者OpenMP来加速.整个库分 ...

  3. numpy(一)

    ndarray np的一个核心类,它描述了相同类型的“项目”集合.可以使用例如N个整数来索引项目.每个项目占用相同大小的内存块, 并且所有块都以完全相同的方式解释. 如何解释数组中的每个项目由单独的数 ...

  4. Linux中的各种文件类型

    Linux中有一句话:一切皆是文件 1.普通文件( -       regular file ) (1).文本文件 文件中的内容是由文本构成的,文本指的是ASCII码字符.文件里的内容本质上都是数字( ...

  5. python图像处理常用方法

    在线标注网站 https://gitlab.com/vgg/via http://www.robots.ox.ac.uk/~vgg/software/via/via.html 数组与图像互转 from ...

  6. DRF一对多序列化和反序列化

    models.py # 商品分类 class Category(models.Model): name = models.CharField(max_length=32) # 商品 class Goo ...

  7. 14 微服务电商【黑马乐优商城】:day02-springcloud(理论篇二:知道什么是SpringCloud)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一: ...

  8. 绿洲作业第二周 - Y3每日中文学习任务清单

    1. 本周仍是古诗学习周,老师已在“最美诵读”上布置本周需完成的任务,请孩子在“最美诵读”小程序中,结合老师发的学习任务清单,合理安排时间进行学习.如果孩子另有学习安排,可在周日(2.23)23:59 ...

  9. javacv获取视频第一帧

    第一种是用ffmpeg工具,不过还得安装客户端软件,于是放弃了,还有一种是javacv开源工具,所以选择第二种: 第一种:ffmpeg工具 需要安装ffmpeg软件,支持windows和linux,视 ...

  10. JSP和EL和JSTL

    什么是JSP Java Server Page的缩写从用户角度看待,就是一个网页从程序员角度看待,其实是一个java类,它继承了Servlet,所以可以直接说jsp就是一个Servlet 为什么会有J ...