练习切图时发现img和父级div之间总是有2px空隙(chrome),上网搜索解决。
 

图片IMG与容器下边界之间有空隙怎么办?这里介绍3种简单的解决方法。

第一,给图片img标签display:block。

img{display:block}

第二,定义容器里的字体大小为0。

div{
  width:110px;
  border:1px solid #000000;
  font-size:0px;
}

第三,定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top

img{vertical-align:bottom}

其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。

造成图片在IE下与容器下边界有空隙的原因在网上搜了一下,发现old9说的图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。

至于HTML属性align="center"(对于图片浏览器会处理成align="middle"),就相当于vertical-align:middle; 所以道理也是一样的,只要vertical-align不取baseline,这个空隙就消失了。

<转载>解决div里面img的缝隙问题的更多相关文章

  1. 解决div里面img的缝隙问题~

    解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...

  2. HTML解决div里面img的缝隙问题

    图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...

  3. 解决div里面img的缝隙问题(转)

    图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...

  4. 解决div里插入img下边缝隙问题

    <html>   <head>   <title> new document </title>   <meta name="author ...

  5. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  6. 解决div嵌套时IE8和FF无法自适应高度

    解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为h ...

  7. 【转载】div层调整zindex属性无效原因分析及解决方法

    在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的pos ...

  8. css解决display:inline-block;产生的缝隙(间隙)

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是 ...

  9. 解决div和img之间的空隙

    div盒子和img之间有空隙之前也遇到过几次这问题,今天又遇到了特地来总结下. 先上代码和效果图: <!doctype html><html lang="en"& ...

随机推荐

  1. BIOS与UEFI、MBR和GPT介绍

    操作步骤: UEFI是取代传统BIOS的,全称“统一的可扩展固件接口”.MBR则是传统的分区表类型,最大的缺点则是不支持容量大于2T的硬盘.GPT则弥补了MBR这个缺点,最大支持18EB的硬盘,是基于 ...

  2. [编译] g++ 与 Makefile

    g++ -c CppSoureFile -o ObjectCodeFile -c 编译而不链接 -lm 链接数学库 -static 生成静态链接的程序

  3. 使用Action、Func和Lambda表达式

    使用Action.Func和Lambda表达式 在.NET在,我们经常使用委托,委托的作用不必多说,在.NET 2.0之前,我们在使用委托之前,得自定义一个委托类型,再使用这个自定义的委托类型定义一个 ...

  4. wcf 多个节点名出错

    无法加载协定为“ServiceReference1.xxxxxx”的终结点配置部分,因为找到了该协定的多个终结点配置.请按名称指示首选的终结点配置部分. 原因是config节点中多了endpoint相 ...

  5. 终于写好了SR4000的一个实用类了

    /*----------------------------------------------------------------------------- *   *   版权声明: *   可以 ...

  6. Java笔记(二十三)……Map集合

    Map接口 Map<K,V> 该集合存储的是键值对,成对往集合里存,而且要保证键的唯一性 常用方法 添加 Vput(K key, V value) voidputAll(Map<? ...

  7. VisualBox会造成VPN连接不上问题

    今天连接VPN查找点资料,但是怎么也连接不上,一直出现651错误,开始以为是服务器配置原因,重新配置后发现问题依旧,后查找相关资料,发现有提到VisualPC, 感觉VisualBox跟VisualP ...

  8. SGU107——987654321 problem

    For given number N you must output amount of N-digit numbers, such, that last digits of their square ...

  9. 【JAVA - 基础】之Annotation注解浅析

    注解在JAVA中,尤其是一些ORM框架(如Hibernate等)中是比较常用的一种机制. 注解是JAVA 1.5之后引入的新功能,正确来说是反射的一部分,没有反射,注解也就无法正常使用.注解可以理解成 ...

  10. sping获取bean方法 解决资源耗尽

    // ApplicationContext context = new ClassPathXmlApplicationContext(new String[]{"applicationCon ...