这是面试挺喜欢问的题，了解原理的同时，顺便做一下笔记。
本文参考：
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
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1,.box2{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
而当我们在其中一个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;
}
以上。
网友评论