先來解釋下這兩個標簽
inline-block:
字面意思：行內塊元素，相當於強制轉換，把一個標簽設置為行內的塊元素，既有塊元素的部分特性（支持width\height\maigin-top\margin-bottom），又有行內元素的部分特性(不換行)。
vertical-align:
vertical-align 屬性設置元素的垂直對齊方式。
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊方式。
在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
可能的值
| 值 | 描述 |
|---|---|
| baseline | 默認。元素放置在父元素的基線上。 |
| sub | 垂直對齊文本的下標。 |
| super | 垂直對齊文本的上標 |
| top | 把元素的頂端與行中最高元素的頂端對齊 |
| text-top | 把元素的頂端與父元素字體的頂端對齊 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊。 |
| text-bottom | 把元素的底端與父元素字體的底端對齊。 |
| length | |
| % | 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。 |
| inherit | 規定應該從父元素繼承 vertical-align 屬性的值。 |
深入理解vertical-align這些值的含義，可以參考這篇博客 深入理解CSS中的行高與基線
現在的問題是使用inline-block時遇到關於vertical-align的問題：
HTML+CSS 代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動定義</title> <style type="text/css"> div{ border: 1px solid red; } .div1 , .div2{ width: 100px; height: 100px; display: inline-block; } </style> </head> <body> <div class="demo"> <div class="div2"></div> <div class="div1"></div> </div> </body> </html>
效果：
這時候發現inline-block元素之間多了不少莫名其妙的邊距，左右的邊距解決方式在另一篇博客有分析，inline-block元素間間隙的分析
至於上下的邊距，別急，還有更奇怪的，我們往這兩個div任意一個里面加點文字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動定義</title> <style type="text/css"> div{ border: 1px solid red; } .div1 , .div2{ width: 100px; height: 100px; display: inline-block; } </style> </head> <body> <div class="demo"> <div class="div2">Web前端</div> <div class="div1"></div> </div> </body> </html>
效果：
到這就完全摸不着頭腦了。
分析產生的原因：
經過測試發現，這個下邊距跟inline-block的垂直對齊方式有關，也就是vertical-align;
inline-block的默認對齊方式是vertical-block：baseline，由上面可知，就是inline-block元素要根據父元素的基線對齊，那么問題來了，基線又是什么鬼？
inline-block的基線是正常流中最后一個line box的基線，除非，這個line box里面既沒有line boxes ，或者其本身overflow屬性的計算值不是visible，則它的基線是margin底邊緣。
上面這段不是人話，看不懂沒關系，下面是人話：
如果一個inline-block元素里面是空的，或者它本身有overflow屬性，這種情況下基線是它margin的底邊緣。
如果一個inline-block元素里面不是空的（比如里面有文字或者圖像），則它的基線由正常流中最后一個line box的基線決定。
如圖：基線(Baseline)是大部分字母所“坐”在的，字體的下降部之上的直線。下圖紅色的直線就是基線。
正經原因：
第一個盒子，里面是空的，所以它的基線是它的下邊框。
第二個盒子，里面有文字，所以它的基線是正常流中最后一個行框的基線決定，也就是第二行的基線。
默認情況下基線對齊，所以它們就變成這樣啦。
解決辦法：
對於行內元素，vertical-align雖然不可見，但實際上【到處都是】！
也就是說，只要是行內元素，一定會受它影響。
在遇到由vertical-align:baseline造成的各種無法理解的怪異現象，可以直接放大招，廢掉基線對齊（比如底線對齊、頂線對齊就很好啊），統一對齊方式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動定義</title> <style type="text/css"> div{ border: 1px solid red; } .div1 , .div2{ width: 100px; height: 100px; display: inline-block; /* * 以下三種方式任意選一種都可以 */ vertical-align: top; /*vertical-align: bottom; vertical-align: middle;*/ } </style> </head> <body> <div class="demo"> <div class="div2">Web前端</div> <div class="div1"></div> </div> </body> </html>
參考博客：