vertical-align和line-height之间不得不说的那些事儿

在之前的文章《vertical-align的简单介绍》中，我扬言要继续深挖vertical-align和line-height之间的关系，今天决定要填坑了……

世界上的事物都是存在广泛联系的，这些联系有些明显，有些隐秘，有些强而有力，有些脆弱而若有若无。有的时候看似不相关的两种东西其中的联系让人咋舌，而又的时候看似联系很紧密的两种事物偏偏没半毛钱的关系。量子力学中的“超距感应”就很好的证明这点。

比如现实生活中你的女神对你百般呵护，但是你从她的朋友圈了解到其实自己只是个“备胎”。又或是一件事忙死忙活到都来都肥了别人，自己最后连个P都得不到。想到这里，我连继续写下去的勇气都没了，可悲的人生啊……

前面的话有点悲观了……这段掐了别播。vertical-align和line-height之间的联系到底是怎么样的?难道只是简单的vertical-align百分比值的结果是根据line-height的值来计算这么简单么？

下面插播一个广告，不对插播一个图来说明问题。我们将图片放到一个div标签中。

//html  code


//类似这个样子

女帝波雅汉库克

这个时候看上去一点毛病都没有是吧，嘿嘿嘿~越是看似平常的地方，越会酝酿着不可思议的东西。这个时候如果我们给div标签设置一个背景色的话，看看会不会出现你脑海中想想的情况。

//html  code



//类似这个样子

在背景色的衬托下，我们发现了一些小小的问题。

vertical-align和line-height之间不得不说的那些事儿

不知道大家都没有遇见过类似的情况，反正我是遇见过好几次。尤其是在一些项目中出现的莫名其妙。例如下图中一个客户的网站中就有这种现象出现。

神秘的间距

实在是找不到下面空隙的那么点高度是从哪里来的，请教了一些同事，他们的方法很是简单粗暴，直接将标签的样式添加display:block;；这种方法简单粗暴，直接就把问题解决了。闲暇之余还是百思不得其解，为什么会出现这样的现象呢？我决定必须要搞清楚最根本的原因是什么。

回顾《vertical-align的简单介绍》的知识，摘取最能概括全文知识点的一张图，就是关于内联元素会生成行框和行内框概念的说明图。如下图：

行框和行内框

我们从上图可以了解到，只要是内联元素都会形成inline box,而的默认样式是display:inline;，也就是说img其实是个内联元素。那么在inline box中影响内联元素最关键的两个属性就是vertical-align来控制显示位置和line-height来控制占据空间。简直就是无处不在……

line box所占据空间的大小是受其内部inline box影响的，也就是line box的高度是由内部所有的inline box中行高最大值来决定的。有些绕嘴，大概意思自己体会。

明白了这些，就好办了。一个实验直接能让问题全部给暴露出来……come on baby~!现在图片后面添加几个字，然后给字体赋予背景色，并且给此元素赋予display:inline-block;。//PS:这里如果用inline并不能完全显示出文字所占据的实际高度，而用inline-block就能将实际占据的高度给完全显示出来。

嘿嘿内联元素的的vertical-align和line-height联合演出了一出“好戏”啊，可能有人看到这里还比较懵逼。没关系我们慢慢解释.在前文中我也介绍到，可以让标签display:block;来解决这个问题，这种方法也就是直接“屏蔽”掉vertical-align和line-height对内联元素的影响。我们回头看看如果不这样做这俩倒霉的属性是如何产生出这样的效果的。

在图片后面添加文字，只是让这个问题曝光出来，没有文字的时候由于是内联元素，而内联元素vertical-align的默认是baseline。就是这个属性在坏事，根据《vertical-align的简单介绍》中介绍关于基线概念的图能助于我们理解。

基线概念

神秘的空隙就是基线和行高区域的下边界的距离，前文中的试验把文字背景色并让文字变为inline-block的目的就是让行高的影响区域也给显示出来，如果只是inline那么被“染色”的区域只是底线到顶线的区域。vertical-align和line-height就是造成神秘空隙的元凶，两者共同“导演”了可悲的神秘空隙“大戏”……

那么解决方案就呼之欲出了：第一种：改变display的属性，这种简单粗暴。第二种：设置vertical-align的值为非baseline。第三种：改变line-height的值，让行高足够小，小到baseline并不能影响到显示效果。

女帝波雅汉库克

本来是有一个例子的，懒病发作，直接上图

改变了图片的vertical-align的值，所影响的结果

下图则是表明了line-height属性是如何影响到“神秘空隙”的。

line-height的影响

看来内联元素/行内元素的属性vertical-align和line-height还是需要引起我们足够的重视的。一个不小心就会出现很小的BUG。不过如果遇见BUG了不要着急，如果发现是内联元素出问题了，首先从这两个属性着手去寻找解决方法还是一个不错的套路。

肚子饿了，我觅食去也~~

(报告完毕！)