方案一: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. AttributeError: module 'selenium.webdriver.common.service' has no attribute 'Service'

    今天爬虫时需要使用到selenium, 使用pip install selenium进行安装. 可是一开始写程序就遇到了AttributeError: module 'selenium.webdriv ...

  2. GTX 1080显卡出错

    NVRM: RmInitAdapter failed! (0x26:0xffff:1097) NVRM: rm_init_adapter failed for device bearing minor ...

  3. 17.3.12--time模块

    import time  #导入time模块 应用的时候有两种方式来表示时间: 1)时间戳 2)格式化的时间str(字符串)   3)元祖(struct_time)以及calendar 2---tim ...

  4. pandas(二)

    1.Series序列 一维的数组数据,构建是传二维数据会报错,数据具有索引,构建时如果不传索引,默认为数字rang索引. series存在列名和索引,sr.at[0]是通过列名来定位数据(iat定位行 ...

  5. Python验证6174猜想

    num=int(input()) c=num while c!=6174:     digits=list(str(c))     digits.sort(reverse=True)#排列最大数和最小 ...

  6. 求素数的一个快速算法 Python 快速输出素数算法

    思想 以100以内为例. 生成一个全是True的101大小的数组 2开始,遇到2的倍数(4,6,8,10...)都赋值为False 因为这些数字都有因子 2 3开始,遇到3的倍数(6,9,12...) ...

  7. 剑指offer【10】- 变态跳台阶

    题目:一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 关于本题,前提是n个台阶会有一次n阶的跳法.分析如下: f(1) = 1 f(2) ...

  8. 决策树分类回归,ID3,c4.5,CART,及其Python代码

    决策树模型 内部节点表示一个特征或者属性,叶子结点表示一个类.决策树工作时,从根节点开始,对实例的每个特征进行测试,根据测试结果,将实例分配到其子节点中,这时的每一个子节点对应着特征的一个取值,如此递 ...

  9. day28-黏包现象

    #黏包现象:信息还没接收完,下一次接收的时候一下子接收好几条黏在一起的信息. #黏包现象的原因:接收端不知道发送端发送的数据的长度.recv(字节数小了). # 第一次无法接收完就缓存起来,下一次接收 ...

  10. 007.前端开发知识,前端基础CSS(2020-01-28)

    一.布局 一列固定宽度且居中 两列左窄右宽型 通栏平均分布型 1.一列固定宽度且居中布局<body> .top+.banner+.main+.footer 按Tab键,得到下框中代码 &l ...