方案一: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. qt使用了qstackedwidget里面放置了widget后对该子widget设置的样式无效

    关键字:子窗口样式无效 QStackedwidget 问题: 我有一个对话框,里面放了一个qstackedwidget,qstackedwidget放了N个子窗口,使用addwidget添加上去了: ...

  2. linux tar/ tar.gz文件解压

    1.tar 压缩 tar -cvf jpg.tar *.jpg //将目录里所有jpg文件打包成tar.jpg tar -czf jpg.tar.gz *.jpg   //将目录里所有jpg文件打包成 ...

  3. Node.js—第一个动态页面

    话不多说 上代码 没有加什么处理也不严谨 只为效果 const http=require('http'), path=require('path'), fs=require('fs') //创建服务 ...

  4. idea代理上网

    idea 代理上网 浏览器能够上网,idea无法下载jar 浏览器无法上网则配置浏览器代理 --------- start //------------------------浏览器代理完毕 idea ...

  5. C++ 11新标准实现POJ No.2195-GoingHome

    Going Home(回家)(标签:二部图,匈牙利算法,KM算法) 题目描述 在网格地图上,有n个男人和n个房屋. 在每个单位时间内,每个小人都可以水平或垂直移动一个单位步长到相邻的点. 对于每个小人 ...

  6. SaltStack中状态间关系unless、onlyif、require、require_in、watch、watch_in

    1.unless 检查的命令,仅当unless选项指向的命令返回值为false时才执行name定义的命令 cmd.run: {% "] %} - name: 'nohup sh /alida ...

  7. 常用DOS命令（1） color,dir,copy,shutdown,mkdir(md),rmdir(rd),attrib,cd

    1.  color color [attr] 设置默认的控制台前景和背景颜色. attr        指定控制台输出的颜色属性.颜色属性由两个十六进制数字指定 -- 第一个对应于背景,第二个对应于前 ...

  8. Excel文件比较工具的使用

    本工具用于比较两个文件夹中对应Excel工作簿中单元格数据是否不同. 如果有内容不同的单元格,就在结果报告中表示出来. 点击如下链接,下载. Excel文件比较工具.rar 解压缩后,看到1个exe文 ...

  9. Python3.7离线安装Requests无法正常使用问题

    继续搬砖...... 春节前,克服了网络受限的情况下离线安装Python库文件问题,传送门如下: https://www.cnblogs.com/mrgavin/p/12202214.html htt ...

  10. 第二个--关于led灯的代码总结

    又要继续奋斗啦,不然就交白卷了: 1---自己注意,就是那个板子上有8个led灯,这个灯呢,没哟甩端口直接控制模式用573锁存器来控制的,为的是啥呢,因为你的芯片就那么几个引脚  ,你就单单把引脚拿来 ...