方案一: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. PAT Advanced 1099 Build A Binary Search Tree (30) [⼆叉查找树BST]

    题目 A Binary Search Tree (BST) is recursively defined as a binary tree which has the following proper ...

  2. [RoarCTF 2019]Easy Java

    0x01知识点: WEB-INF/web.xml泄露 WEB-INF主要包含一下文件或目录: /WEB-INF/web.xml:Web应用程序配置文件,描述了 servlet 和其他的应用组件配置及命 ...

  3. Html4.0.1 标签使用笔记

    1.lang=zh,en有什么用? 告诉搜索引擎爬虫,网站是关于什么内容的,优先显示网站排名.一般竞价排名,根据百度搜索引擎,需要签订关键词协议,首页第一个竞价排名大概是30-50元/条,竞价排名范围 ...

  4. SEO初步学习之影响网站排名的因素

    本文介绍一些比较明显的因素,一些隐藏较深的原因还有待发掘: 1.采集网站内容,即抄袭其他网站的内容. 2.新站上传后建议不要有大的改动. 3.标题频繁修改. 4.大量投放垃圾外链. 5.不做友链,交友 ...

  5. shell脚本判断进程是否运行

    zzx@zzx120:~$ if ps aux | grep "python"|grep -v grep > /dev/null             #$?的值不同 th ...

  6. Linux下常用的3种软件安装方式—rpm、yum、tar

    一:Linux源码安装    1.解压源码包文件    源码包通常会使用tar工具归档然后使用gunzip或bzip2进行压缩,后缀格式会分别为.tar.gz与.tar.bz2,分别的解压方式:   ...

  7. vimdiff换行

    两个比较文件同时换行,用:windo set wrap, 或者如下 vimdiff +"windo set wrap" chap/abstract.tex abstract.tex ...

  8. 1.where子句的优化

    不需要在牺牲可读性的情况下重写sql,因为mysql会自动进行类似的优化. 1.去掉无用的括号 ((a AND b) AND c OR (((a AND b) AND (c AND d)))) -&g ...

  9. Unity3D事件函数的执行顺序

    In Unity scripting, there are a number of event functions that get executed in a predetermined order ...

  10. 洛谷 P5018 对称二叉树

    题目传送门 解题思路: 先计算每个点的子树有多少节点,然后判断每个子树是不是对称的,更新答案. AC代码: #include<iostream> #include<cstdio> ...