空白产生原因： 图片默认的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. 【启发式搜索】Codechef March Cook-Off 2018. Maximum Tree Path

    有点像计蒜之道里的 京东的物流路径 题目描述 给定一棵 N 个节点的树,每个节点有一个正整数权值.记节点 i 的权值为 Ai.考虑节点 u 和 v 之间的一条简单路径,记 dist(u, v) 为其长 ...

  2. 洛谷 2387/BZOJ 3669 魔法森林

    3669: [Noi2014]魔法森林 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 3765  Solved: 2402[Submit][Statu ...

  3. unbuntu14下Qt4.8 和MySQL连接问题 QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE

    使用 QSqlDatabase::addDatabase创建数据库时 会报错: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: availab ...

  4. RSA与AES实现数据加密传输

    RSA.AES简介 RSA:非对称加密,需要提前生成两个密钥(一对的),通过其中一个密钥加密后的数据,只有另一个密钥能解密.通常这两个密钥中有一个会暴漏出来,即对外公开的,这个密钥称为“公钥”,反之另 ...

  5. python-面试常用 --变量、内存管理（小整数池，引用计数）

    执行Python程序的两种方法 第一种:交互式(jupyter就是对这种进行了封装) 优点:直接给出结果 缺点:无法保存 第二种:命令行式,通过Python解释器输入文本(pycharm对这种进行了封 ...

  6. Jsoup -- 网络爬虫解析器

    需要下载jsoup-1.8.1.jar包 jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQue ...

  7. Python语言程序设计之一--for循环中累加变量是否要清零

    最近学到了Pyhton中循环这一章.之前也断断续续学过,但都只是到了函数这一章就停下来了,写过的代码虽然保存了下来,但是当时的思路和总结都没有记录下来,很可惜.这次我开通了博客,就是要把这些珍贵的学习 ...

  8. LeetCode（220） Contains Duplicate III

    题目 Given an array of integers, find out whether there are two distinct indices i and j in the array ...

  9. Linux性能查看

    1.TOP top  登录后默认按进程的CPU使用情况排序,  按M则按内存使用排序 2. vmstat 2 2 显示系统负载 3. free  -m 查看内存使用情况 4.抓包 tcpdump -i ...

  10. selenium - js日历控件处理

    # 13. js处理日历控件 ''' 在web自动化的工程中,日历控制大约分为两种: 1. 可以直接输入日期 2. 通过日历控件选择日期 基本思路: 利用js去掉readonly属性,然后直接输入时间 ...