空白产生原因： 图片默认的vertical-align是baseline，（元素放置在父元素的基线上，也就是xx下边距）

一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

所以我们只需要将img图片display:block，即可去掉div和img之间的空白

或者将div的line-height设置得足够小，也可以去掉空白，例如div{line-height:5px;}

也可以将font-size设为0，实际上也是改变了line-height

当然，我们可以改变vertical-align，让它不是baseline，比如设置vertical-align:middle

如何解决div里面img图片下方有空白的问题？的更多相关文章

  1. 图片下方出现多3px的原因及解决方法

    产生原因:主要是因为图片的垂直对齐方式vertical-align引发的,默认值是baseline,默认为此值时图片下方就会多出3px. 解决方案: 1.将图片的垂直对齐方式vertical-alig ...

  2. vertical-align和图片下方空白问题

    <style> .box1,.box2{ display: inline-block; background-color:#f0f3f9; width:150px; height: 150 ...

  3. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  4. <转载>解决div里面img的缝隙问题

    转载自:http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html   练习切图时发现img和父级div之间总是有2px空隙(chrome),上网搜索解决 ...

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

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

  6. javascript焦点图(根据图片下方的小框自动播放)

    html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...

  7. css之图片下方定位遮掩层

    需要的效果如图,图片下方加个遮掩层: html: <div class="listContent"> <div><img src="imag ...

  8. 解决 div或者a标签的高度比里面的img高度多的 问题

    今天做练习遇到一个问题,分享一下解决办法: 在编写html中的一个放置图片时,代码如下: <div class="nrtp"> <div class=" ...

  9. div中的图片跑出来

    一:div中的图片跑出来 <style> /* 图片在一行 */ #div1 li{ float: left; list-style: none; } </style> < ...

随机推荐

  1. Python爬虫系列-PyQuery详解

    强大又灵活的网页解析库.如果你觉得正则写起来太麻烦,如果你觉得BeautifulSoup语法太难记,如果你熟悉jQuery的语法,那么PyQuery就是你的最佳选择. 安装 pip3 install ...

  2. 小谈python里 列表 的几种常用用法

    在python中列表的常用方法主要包括增加,删除,查看和修改.下面以举例子的方法具体说明,首先我们创建两个列表,列表是用[ ]表示的,里面的元素用逗号隔开. a=[‘hello’,78,15.6,‘你 ...

  3. hdu 5984

    PockyTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submissio ...

  4. MIP启发式算法：Variable neighborhood search

    *本文主要记录和分享学习到的知识,算不上原创. *参考文章见链接. 本文主要讲述启发式算法中的变邻域搜索(Variable neighborhood search).变邻域搜索的特色在于邻域结构的可变 ...

  5. Linux学习-什么是例行性工作排程

    那么 Linux 的例行性工作是如何进行排程的呢?所谓的排程就是将这些工作安排执行的流程之意! 咱们的 Linux 排程就是透过 crontab 与 at 这两个东西! Linux 工作排程的种类: ...

  6. 使用Blend的一些问题和技巧

    WPF开发,界面处理首选Blend,如果你开发了两年WPF都没接触过blend(当然这种几率不高),或者你刚接触WPF,可以考虑使用Blend,这货也算得上一个神器,上手也不难.以下有两位讲得不错,大 ...

  7. UML结构与解析——BUAA OO第四单元作业总结

    UML与解析架构 UML是什么 统一建模语言(英语:Unified Modeling Language,缩写 UML)是非专利的第三代建模和规约语言.UML是一种开放的方法,用于说明.可视化.构建和编 ...

  8. py文件转exe时包含paramiko模块出错解决方法

    问题描述:python代码中包含paramiko模块的远程登录ssh,在用pyInstaller转为exe时报错, 报错提示为“No handlers could be found for logge ...

  9. Python虚拟机中的一般表达式（二）

    复杂内建对象的创建 在上一章Python虚拟机中的一般表达式(一)中,我们看到了Python是如何创建一个空的字典对象和列表对象,那么如果创建一个非空的字典对象和列表对象,Python的行为又是如何呢 ...

  10. 如何让ie8/ie7/ie6支持html5的<footer></footer><nav></nav>等标签

    使用他们能让代码语义化更直观,而且更方便SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理.以下就介绍几种方式. 方式一:Coding JavaS ...