一、想死你们了
几个星期没有写文章了，好忙好痒；个把月没有写长篇了，好忙好想；半个季度没在文章中唠嗑了，好痒好想。
后面一栋楼有对夫妻在吵架，声音雄浑有力，交锋酣畅淋漓，还以为只有小乡镇才有这架势，哦，突然想起来，我就是住在上海郊外的小乡镇上。
刚刚买了几十股京东的股票，第一次玩这个，看好京东的发展。其实股价21的时候就打算入手了，但是，转外汇的时候，提示，要工作时间。然后一忙二忘，等现在入的时候，已经涨了20%多了，科科，肥皂弄人啊！写到这里的时候，忍不住拿出手机一看，哎呦，不错哦，盈利28刀，孩子的半罐奶粉钱有了，哈哈！
说起肥皂，让我想起了《监狱学院》，科科~
原来，肥皂和基友的传说已经传播到了11区。岂止啊，除了2次元，代码次元也深受其爱，比方说CSS届的vertical-align和line-height就是典型的表面上看上去大相径庭，实际上是大进后庭的断背好基友啊！
没错，就是这么狗血！
乡下人不打诳语，下面我就好好跟大家八卦下，vertical-align和line-height之间令人发指的基友关系！
二、表现明显的断背基情
众所周知，vertical-align支持很多属性值，足足可以组成一个足球队了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* 关键字值 */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <长度> 值 */ vertical-align: 10em; vertical-align: 4px; /* <百分比> 值 */ vertical-align: 10%; /* 全局值 */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; |
其中，有个属性值暴露了vertical-align和line-height之间的基友关系，大家猜猜看是哪个属性值？
哇塞，好厉害！居然被大家一眼就看出来了，没错，就是“百分比值”。
vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。举个简单的例子，如下CSS代码：
|
1 2 3 4 |
{ line-height: 30px; vertical-align: -10%; } |
实际上，等同于：
|
1 2 3 4 |
{ line-height: 30px; vertical-align: -3px; /* = 30px * -10% */ } |
CSS属性何其多，偏偏跟line-height有一腿，这不是有基情那是什么？
//zxx: IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height
三、背地里无处不在的基友关系
//zxx: 注意，
vertical-align和line-height的地下基友关系从HTML5文档声明开始的，因此，以下探讨的现象，都是在页面为HTML5声明前提下，类似下面的doctype:
另外，下面很多效果直接就是真实演示，因此，请使用现代浏览器观摩下面的内容。如果发现某些行为与描述不匹配，且浏览器正常，那可能是因为你访问的并不是原出处。
① 基本现象
要八卦vertical-align和line-height之间的关系，我们不妨从一个极其简单的现象入手。假设，我们有一个<div>标签，然后，里面有一张<img>图片，我们的HTML代码就是这样子：
|
1 |
<div><img src="mm1.jpg"></div> |
恩，看上去很正常，一切都是理所当然。然而，如果我们给这个<div>元素增加一个背景色，例如淡蓝色：
|
1 |
<div style="background-color:#e5edff;"><img src="mm1.jpg"></div> |
则会是下面这样：
会发现图片下面有一段空白空间：
想必大家都遇到过类似问题，不知大家有没有思考过，为什么图片下面有留有一段间隙呢？
实际上，这段空白间隙就是vertical-align和line-height携手搞的鬼！
首先，大家一定要意识到这么一点：对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！
因此，对于内联元素各种想得通或者想不通的行为表现，基本上都可以用vertical-align和line-height来解释，以及进行行为矫正，然而，要深入理解这些行为表现，还是需要狠花一番功夫的，因此，下面的内容，请确保你有半小时充足时间细细阅读，别的地方可是看不到的。
② 幽灵空白节点
「幽灵空白节点」这个概念我自己命名的，注意，是我个人YY出来的，是我自己便于理解某些行为特征提出的概念。规范可能有类似的概念，但名称并非这个。 W3C规范虽然有很多行为的解释和说明，但是，毕竟官方的东西，要求严谨正式，但是，也会有太干太涩的感觉。如果快速掌握和理解这些行为表现呢？就我个人而言，从两方面入手：1.情感化认知；2. 具象化思维。
例如，我称vertical-align和line-height为好基友（包括以前称浮动和绝对定位是兄弟），就是“情感化认知”；而这里的「幽灵空白节点」就是“具象化思维”。
那「幽灵空白节点」是个什么意思呢？
在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”。 //zxx: 自己捣腾的概念，不是权威，欢迎其他小伙伴反馈权威解释
抽象了这个概念，绝对定位与text-align的一些行为表现，以及这里的行为表现，就好理解了。
还是上面的图片下边缘留空隙的例子，实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。但是，空格是透明的，为了便于大家理解，我就直接使用很明显的匿名inline box, 也就是字符代替。如下，大家会发现，图片下面的间隙，依旧是那个间隙。
下面要解释这个间隙就好解释了。下面，我们让新增的文本inline-block化，然后弄个白色背景，显示其占据的高度。
会发现，图片下面的间隙，依旧是那个间隙。但是，我们的理解就好理解了。回答下面几个问题，我们就知道表现的原因了：
vertical-align默认的对齐方式是？- 后面zxx文字的高度从何而来？
vertical-align默认值是baseline, 也就是基线对齐。而基线是什么，基线就是字母X的下边缘（参见“字母’x’在CSS世界中的角色和故事”一文）。所以，妹子图片的下边缘就和后面zxx中的字母x下边缘对齐（见下图）。而字符zxx本身是有高度的，对吧，于是，图片下面就留空了。
- 而
zxx文字的高度是由行高决定的。
因此，简单的图片下面留白行为表现，本质上，就是vertical-align和line-height背地里搞基造成的。
知道了问题的原因，我们就可以对症下药，准确搞定图片下面我们不希望看到的间隙。怎么搞呢？一对基友，vertical-align和line-height我们随便搞定一个就可以了。
比方说vertical-align.
1. 让vertical-align失效
图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等（如果布局允许）。例如：
|
1 |
img { display: iv class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> img { display: 面一栋楼有对夫妻在吵架，声音雄浑有力，交锋酣畅淋漓，还以为只有小乡镇才有这架势，哦，突然想起来，我就是住在上海郊外的小乡镇上。
刚刚买了几十股京东的股票，第一次玩这个，看好京东的发展。其实股价21的时候就打算入手了，但是，转外汇的时候，提示，要工作时间。然后一忙二忘，等现在入的时候，已经涨了20%多了，科科，肥皂弄人啊！写到这里的时候，忍不住拿出手机一看，哎呦，不错哦，盈利28刀，孩子的半罐奶粉钱有了，哈哈！ 说起肥皂，让我想起了《监狱学院》，科科~
原来，肥皂和基友的传说已经传播到了11区。岂止啊，除了2次元，代码次元也深受其爱，比方说CSS届的
没错，就是这么狗血！ 乡下人不打诳语，下面我就好好跟大家八卦下，
二、表现明显的断背基情众所周知，
其中，有个属性值暴露了
哇塞，好厉害！居然被大家一眼就看出来了，没错，就是“百分比值”。
实际上，等同于：
CSS属性何其多，偏偏跟 //zxx: IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height 三、背地里无处不在的基友关系
① 基本现象 要八卦
恩，看上去很正常，一切都是理所当然。然而，如果我们给这个
则会是下面这样：
会发现图片下面有一段空白空间： 想必大家都遇到过类似问题，不知大家有没有思考过，为什么图片下面有留有一段间隙呢？ 实际上，这段空白间隙就是 首先，大家一定要意识到这么一点：对于内联元素，vertical-align与line-height虽然看不见，但实际上「到处都是」！
因此，对于内联元素各种想得通或者想不通的行为表现，基本上都可以用 ② 幽灵空白节点 「幽灵空白节点」这个概念我自己命名的，注意，是我个人YY出来的，是我自己便于理解某些行为特征提出的概念。规范可能有类似的概念，但名称并非这个。 W3C规范虽然有很多行为的解释和说明，但是，毕竟官方的东西，要求严谨正式，但是，也会有太干太涩的感觉。如果快速掌握和理解这些行为表现呢？就我个人而言，从两方面入手：1.情感化认知；2. 具象化思维。 例如，我称 那「幽灵空白节点」是个什么意思呢？ 在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”。 //zxx: 自己捣腾的概念，不是权威，欢迎其他小伙伴反馈权威解释 抽象了这个概念，绝对定位与 还是上面的图片下边缘留空隙的例子，实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。但是，空格是透明的，为了便于大家理解，我就直接使用很明显的匿名inline box, 也就是字符代替。如下，大家会发现，图片下面的间隙，依旧是那个间隙。
下面要解释这个间隙就好解释了。下面，我们让新增的文本inline-block化，然后弄个白色背景，显示其占据的高度。
会发现，图片下面的间隙，依旧是那个间隙。但是，我们的理解就好理解了。回答下面几个问题，我们就知道表现的原因了：
因此，简单的图片下面留白行为表现，本质上，就是 知道了问题的原因，我们就可以对症下药，准确搞定图片下面我们不希望看到的间隙。怎么搞呢？一对基友， 比方说 1. 让vertical-align失效 |
