转自知乎：http://www.zhihu.com/question/21558138
要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念：

<img src="http://p3.zhimg.com/f0/f1/f0f1e7625a10b204bc32c7203835740d_m.jpg" data-rawwidth="570" data-rawheight="175" class="origin_image zh-lightbox-thumb" width="570" data-original="http://p3.zhimg.com/f0/f1/f0f1e7625a10b204bc32c7203835740d_r.jpg">可以看到，出现在baseline下面的是 p 啊，q 啊, g 啊这些字母下面的那个尾巴。可以看到，出现在baseline下面的是 p 啊，q 啊, g 啊这些字母下面的那个尾巴。

对比一下 vertical-align 的另外两个常见值，top 和 bottom:

<img src="http://p3.zhimg.com/fa/1b/fa1bef7a27a3c235a2e9bd8de5ba5448_m.jpg" data-rawwidth="571" data-rawheight="175" class="origin_image zh-lightbox-thumb" width="571" data-original="http://p3.zhimg.com/fa/1b/fa1bef7a27a3c235a2e9bd8de5ba5448_r.jpg">
可以看到，baseline 和 bottom 之间有一定的距离。实际上，inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字，只要是 inline 的图片这段空白都会存在。

到这里就比较明显了，要去掉这段空白，最直接的办法是将图片的 vertical-align 设置为其他值。如果在同一行里有文字混排的话，那应该是用 bottom 或是 middle 比较好。

另外，top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

延伸阅读：What is Vertical Align?

img图片下有个间隙是为什么的更多相关文章

  1. [No0000A8]Word中设置图片下的题注及插入多级列表编号

    1.什么是题注? 2.怎么实现一个可以自动更新的题注?  只有先定义好文档编号后,才可以设置出正确的图片下标题注. 文章的结构可以通过导航窗口导航. 导航窗口打开方式. 3.设置好文档编号后,怎样插入 ...

  2. iOS开发-UITableView顶部图片下拉放大

    关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollV ...

  3. line-height行高与图片的隐匿文本间隙消除方法

    (标注 文章来源 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-hei ...

  4. 了解下Mysql的间隙锁及产生的原因

    什么是间隙锁当我们用范围条件而不是相等条件检索数据,并请求共享或排他锁时,InnoDB会给符合条件的已有数据记录的索引项加锁:对于键值在条件范围内但不存在的记录,叫做“间隙(GAP)”,InnoDB也 ...

  5. 安卓开发：用ImageView放上图片后上下有间隙

    想不到在我使用第一个UI控件ImageView时候就遇上了问题,简单使用ImageView如下: <ImageView android:layout_width="match_pare ...

  6. 两种图片下拉放大效果实现（自定义CoordinatorLayout以及自定义Recylerview）

    一.自定义CoordinatorLayout实现图片放大功能 本文是基于折叠布局实现的图片上拉滑动,下拉图片放大,松手放大的效果,先看下效果图. 实现原理: 1.使用CoordinatorLayout ...

  7. ⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. qrcodenet二维码图片下扩展区域添加号段的操作

    总监安排了个任务,一个号码导出一个二维码图, 我实现了最终还能批量生成,结果主管说要在图片下边添加一行,和图片是一起的 最开始把控件的上的图给改了,结果保存起来没用,控件上的图跟要保存的不是一个事. ...

  9. html+css图片下弹出蒙版

    鼠标移入时弹出蒙版!!! html<!DOCTYPE html<html lang="en"<head> <meta charset="UT ...

随机推荐

  1. Spring Autowire自动装配介绍

    在应用中,我们常常使用<ref>标签为JavaBean注入它依赖的对象.但是对于一个大型的系统,这个操作将会耗费我们大量的资源,我们不得不花费大量的时间和精力用于创建和维护系统中的< ...

  2. 【转】iOS 宏(define)与常量(const)的正确使用-- 不错

    原文网址:http://www.jianshu.com/p/f83335e036b5 在iOS开发中,经常用到宏定义,或用const修饰一些数据类型,经常有开发者不知怎么正确使用,导致项目中乱用宏与c ...

  3. 【转】adb控台中Permission denied的解决方案

    原文网址:http://blog.csdn.net/wkl305268748/article/details/13504171 [前提]手机一定要root 在控制台中想要将电脑上c盘中的tcpdump ...

  4. onAttachedToWindow () 和 onDetachedFromWindow () ; 以及更新视图的函数ondraw() 和dispatchdraw()的区别

    protected void onAttachedToWindow() This is called when the view is attached to a window. At this po ...

  5. C# DataGridView绑定数据源的几种常见方式

    开始以前,先认识一下WinForm控件数据绑定的两种形式,简单数据绑定和复杂数据绑定. 1. 简单的数据绑定 例1 using (SqlConnection conn = new SqlConnect ...

  6. 每天学点linux命令--tail，cut，sort，uniq

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...

  7. ubuntu 11.10 (64bit) install opencv 2.4.8 and run in Qtcreator

    install gtk2+ sudo apt-get install libgtk2.0*sudo apt-get install cmake-qt-gui tar xzvf opencv-2.4.8 ...

  8. Zabbix探索：Proxy没有回传任何数据

    因为Zabbix使用Puppet搭建的,实际上是通过脚本安装的,为了偷懒,将脚本都写一块去了,后来发现Proxy的配置和Zabbix的配置不同,又偷懒一次,复制了一下,但是为了调整脚本使用的便捷性,将 ...

  9. bzoj 1095 [ZJOI2007]Hide 捉迷藏（括号序列+线段树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1095 [题意] 给定一棵树,树上颜色或白或黑而且可以更改,多个询问求最远黑点之间的距离 ...

  10. C++ 我想这样用（一）

    虽然还是菜鸟,但我是一个地地道道的c程序员,甚至一度很讨厌C++(虽然现在也是). 为了在不用C++的情况下学习和使用面向对象而长期奔走,曾经用过一年的Python,后终放弃.之后很长一段时间里摆弄O ...