vertical-align问题（img下方空白及无法对齐）

这是面试挺喜欢问的题，了解原理的同时，顺便做一下笔记。
本文参考：
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height
http://www.cnblogs.com/starof/p/4512284.html

在现实使用或者面试中，我们经常会碰到vertical-align一些奇怪的问题，主要由两个：
1、img图片（inline-block元素）下方空白

image.png

2、无法对齐

image.png

【1、img下方空白问题】

产生原因：

• 行内元素，inline-block元素的默认对齐是基于baseline的，
• 对于没有行内元素的box，baseline为底部边缘。如果有inline元素，对齐baseline为inline元素的baseline。
• 在此例中，虽然没有其他字符，但是默认有一个类似长度为0的空白字符，此时就会使底部高度被撑高。
• 多高呢？
  是行高的底部到baseline的距离。

image.png

如果我们再加入一个字符，就会更清楚。

image.png

无论我们在旁边写不写字符，这个默认高度都会存在。

既然我们知道是line-height和vertical-align的原因，有什么解决办法呢？

1、使vertical-align失效

把img或者inline-block元素设置为block元素，这样vertical-align:baseline就不起作用了。

//box是指这个红色的正方形
.box{
  display:block;
}

image.png

此时如果我们还想在同一行放入其他元素怎么办？估计只能定位或者float了。

2、使vertical-align:baseline失效

就是给box设置其他的vertical-align值（top,bottom,middle）

image.png

3、设置line-height

既然有一个默认的空白字符，而其高度是line-height底部到baseline的距离，如果我的line-height足够小，那么这个距离也可以减小为0；

//.ct为包裹box和span文字的容器
.ct{
  line-height: 5px;
}

image.png

4、直接设置fontsize为0

既然是由于文字或者空白字符的baseline对齐导致的，那么我们直接控制font-size为0，让baseline到行高底部为0.
本质还是相当于控制行高。不过span字体会消失。

.ct{
  font-size:0;
}

image.png

================分割线================================

【2.对齐问题】

一般我们直接设置两个inline-block，会直接对齐的。
比如下面这样。

image.png

代码如下

而当我们在其中一个box加入一些文字的时候，就无法对齐了。

image.png

这是为什么呢？结合上面的知识，其实还是vertical-align的对齐问题，box1没有文字，对齐的还是box1的下边缘，box2有文字，对齐的就是文字的baseline了。

image.png

既然知道是baseline搞的鬼，怎么解决呢？
我们可以试试各个vertical-align值，
为什么只有vertical-top可以呢？
看下面的图你就知道了。

image.png

• 当我们给右边box2设置middle时，右边middle会和左边baseline对齐
• 当我们给右边box2设置bottom时，就是上图的位置。
  因为左边对齐方式还是不变（baseline），所以不改变位置。
  右边对齐的是父元素的bottom，也就是最低的bottom，就是左边的bottom。（父元素top取所有元素最高点，bottom取所有元素最低点）

所以最终的解决方案是在box2加一个vertical-ailgn:top

.box2{
  vertical-align:top;
}

以上。