转自知乎: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. [LOJ 1027] Dangerous Maze

    A - A Dangerous Maze Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu ...

  2. apache开源项目--Mavibot

    Mavibot™ 是个Java 的多版本并发控制 BTree,是 JDBM(当前 Apache Directory 服务器的后端)的替代品, 但是有着更强的功能,能适应任意需要实现 Java MVCC ...

  3. ORACLE DATAGURARD配置手记

    经过多次实践,参阅网上N多文章……最后还是配不成,可能本人悟性太低,无法体会高手的笔记.最终还是在前辈的帮助下完成.特用最平实的手法记录下来,以便如吾辈菜鸟能 看得懂. 运行Data Guard的条件 ...

  4. 【转】使用NDK生成native C/C++的可执行程序

    原文网址:http://www.linuxidc.com/Linux/2011-08/40901.htm 众所周知, NDK可以生成lib,让java程序通过jni来调用,其实,NDK也可以生成C/C ...

  5. 【转】Android底层库和程序

    原文网址:http://blog.csdn.net/louiswangbing/article/details/6616202 Android底层库和程序 1.     本地实现的基本结构 Andro ...

  6. jquery M97-datepicker日历控件

    My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件:     <script type=&quo ...

  7. Ext基础一(转载)

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

  8. jquery选择器返回值

    jquery选择器$('selector')返回的不是数组,而是封装好的jquery对象.但这个对象有一个特别的地方,就是查询到的节点被以下标为属性,添加到了jquery对象上,所以它看起来像数组,因 ...

  9. CSLA.NET 简介

    CSLA.NET 据说在国外用的很多,国内介绍这个框架的文章目前网络上能找到的比较早,大多是早期的一些版本的版本的介绍.目前最新版的4.5.6 .版本的整体架构已经有了很大的变化.拟开一个系列,结合〈 ...

  10. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...