空白产生原因： 图片默认的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. CentOS 7 忘记root密码解决方法

    CentOS 7  root密码的重置方式和CentOS 6完全不一样,CentOS 7与之前的版本6变化还是比较大的,以进入单用户模式修改root密码为例: 1.重启机器,进入grub菜单的时候按e ...

  2. Linux学习-Boot Loader: Grub2

    boot loader 的两个 stage 在 BIOS 读完信息后,接下来就是会到第一个开机装置 的 MBR 去读取 boot loader 了.这个 boot loader 可以具有选单功能.直接 ...

  3. centos7 bond 和 网桥配置

    rhel7系统bond配置(更新版本):https://www.cnblogs.com/zhangjianghua/p/9119808.html Bonding的模式一共有7种: 1.mode=0(b ...

  4. UVa 12167 & HDU 2767 强连通分量 Proving Equivalences

    题意:给出一个有向图,问最少添加几条有向边使得原图强连通. 解法:求出SCC后缩点,统计一下出度为0的点和入度为0的点,二者取最大值就是答案. 还有个特殊情况就是本身就是强连通的话,答案就是0. #i ...

  5. UVa 1452 递推 Jump

    约瑟夫变形,先计算出3个数时,最后三个数字的编号. 然后以这三个数为起点,就可以递推出n个数对应的最后三个数字的编号. 递推公式都是一样的. #include <iostream> #in ...

  6. multiprocessing join与lock区别

    加锁 join方法 join方法会造成阻塞,在上一个进程完成之前不会运行join()后面的代码 lock  仍会执行之后的代码,遇到创建进程,会发向操作系统发出指令,但不会执行,等到上锁的进程结束之后 ...

  7. 【Alpha】Scrum Meeting 5-end

    第一天:2019/6/19 前言: 第5次会议在6月19日由PM在教9C-501召开. 总结项目,进行单元测试并进行简单的整合.时长60min. 团队GitHub仓库 仓库连接 1.1 今日完成任务情 ...

  8. Django基于Pycharm开发之二 [使用django adminSite]

    在使用django自带的adminsite的时候,有以下内容需要做. 1.数据迁移,管理表的创建. 2.启用本地化 (setting.py的配置) 一.数据迁移,默认情况下,安装django之后,dj ...

  9. python week08 并发编程之多线程--实践部分

    一. threading模块介绍 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性,因而不再详细介绍 官网链接:https://docs.pytho ...

  10. 常见python快捷键

    http://www.cnblogs.com/toutou/p/4778818.html Ctrl+/注释(取消注释)选择的行 Shift + Enter开始新行 Ctrl + Enter智能换行 T ...