這是面試挺喜歡問(wèn)的題，了解原理的同時(shí)，順便做一下筆記。
本文參考：
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height
http://www.cnblogs.com/starof/p/4512284.html
在現(xiàn)實(shí)使用或者面試中，我們經(jīng)常會(huì)碰到vertical-align一些奇怪的問(wèn)題，主要由兩個(gè)：
1、img圖片（inline-block元素）下方空白
2、無(wú)法對(duì)齊
【1、img下方空白問(wèn)題】
產(chǎn)生原因：
- 行內(nèi)元素，inline-block元素的默認(rèn)對(duì)齊是基于baseline的，
- 對(duì)于沒有行內(nèi)元素的box，baseline為底部邊緣。如果有inline元素，對(duì)齊baseline為inline元素的baseline。
- 在此例中，雖然沒有其他字符，但是默認(rèn)有一個(gè)類似長(zhǎng)度為0的空白字符，此時(shí)就會(huì)使底部高度被撐高。
- 多高呢？
是行高的底部到baseline的距離。
如果我們?cè)偌尤胍粋€(gè)字符，就會(huì)更清楚。
無(wú)論我們?cè)谂赃厡懖粚懽址?，這個(gè)默認(rèn)高度都會(huì)存在。
既然我們知道是line-height和vertical-align的原因，有什么解決辦法呢？
1、使vertical-align失效
把img或者inline-block元素設(shè)置為block元素，這樣vertical-align:baseline就不起作用了。
//box是指這個(gè)紅色的正方形
.box{
display:block;
}
此時(shí)如果我們還想在同一行放入其他元素怎么辦？估計(jì)只能定位或者float了。
2、使vertical-align:baseline失效
就是給box設(shè)置其他的vertical-align值（top,bottom,middle）
3、設(shè)置line-height
既然有一個(gè)默認(rèn)的空白字符，而其高度是line-height底部到baseline的距離，如果我的line-height足夠小，那么這個(gè)距離也可以減小為0；
//.ct為包裹box和span文字的容器
.ct{
line-height: 5px;
}
4、直接設(shè)置fontsize為0
既然是由于文字或者空白字符的baseline對(duì)齊導(dǎo)致的，那么我們直接控制font-size為0，讓baseline到行高底部為0.
本質(zhì)還是相當(dāng)于控制行高。不過(guò)span字體會(huì)消失。
.ct{
font-size:0;
}
================分割線================================
【2.對(duì)齊問(wèn)題】
一般我們直接設(shè)置兩個(gè)inline-block，會(huì)直接對(duì)齊的。
比如下面這樣。
代碼如下
<!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>
而當(dāng)我們?cè)谄渲幸粋€(gè)box加入一些文字的時(shí)候，就無(wú)法對(duì)齊了。
這是為什么呢？結(jié)合上面的知識(shí)，其實(shí)還是vertical-align的對(duì)齊問(wèn)題，box1沒有文字，對(duì)齊的還是box1的下邊緣，box2有文字，對(duì)齊的就是文字的baseline了。
既然知道是baseline搞的鬼，怎么解決呢？
我們可以試試各個(gè)vertical-align值，
為什么只有vertical-top可以呢？
看下面的圖你就知道了。
- 當(dāng)我們給右邊box2設(shè)置middle時(shí)，右邊middle會(huì)和左邊baseline對(duì)齊
- 當(dāng)我們給右邊box2設(shè)置bottom時(shí)，就是上圖的位置。
因?yàn)樽筮厡?duì)齊方式還是不變（baseline），所以不改變位置。
右邊對(duì)齊的是父元素的bottom，也就是最低的bottom，就是左邊的bottom。（父元素top取所有元素最高點(diǎn)，bottom取所有元素最低點(diǎn)）
所以最終的解決方案是在box2加一個(gè)vertical-ailgn:top
.box2{
vertical-align:top;
}
以上。
