有時候我們設置相鄰元素樣式時，比如三個div塊元素，我們想要讓它在一行顯示，當然除了定位，浮動之外我們可以設置他的display為inline-block,讓它變成行內塊進行一行顯示。當然普通的行內元素我們有時候也會這樣設置。下面的例子我們用div舉例
如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.item {
width: 150px;
height: 200px;
background: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="list">
<div class="item">111111</div>
<div class="item">2222</div>
<div class="item">333</div>
</div>
</body>
</html>
我們設置好便簽的內容，我們理想的呈現狀態(tài)是這樣的：
但我們真正寫業(yè)務時，標簽的數據是不可控的，不是像我們寫demo那樣數據是寫死的，動態(tài)的數據有時我們也會出現標簽內的內容為空的時候，這里我們將第二個item的內容置為空，看看效果是不是會變
<div class="list">
<div class="item">111111</div>
<div class="item"></div>
<div class="item">33333</div>
</div>
此時顯示的效果是
不甘心，再讓第一個item內容變?yōu)榭?/p>
此時我們好像發(fā)現了什么，當相鄰元素設置成display：inline-block，有數據的元素與沒有數據的元素相鄰，有數據的元素會發(fā)生偏移。似乎好詭異，查下資料發(fā)現：當元素display設置為inline-block,可以將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。對象呈遞為內聯元素，而同一行內的內聯元素默認是基于 baseline 對齊的，如下圖
圖中的黑色線條就是我們所說的基線：為什么3個元素的方向不是相同的呢？為什么有內容的元素向下，而無內容的元素會向上呢？就此我們需要了解CSS渲染機制：對于一個inline-block元素，如果內部沒有inline內聯元素，或者overflow不是visible，則該元素的基線就是它margin的底邊緣，否則就是元素內部最后一行內聯元素的基線。
簡單地就以上這種情況來說，沒有內容的item會基于它的margin底邊緣也就是它的下邊緣對齊，而包含內容的item會基于其內部內聯元素的基線對齊，所以會造成這種一上一下的情況。
了解清楚這些原理我們想想有什么方法可以解決以上問題。當然我們首先可以想到，還用啥inline-block,直接float浮動一下，問題瞬間解決，想到了浮動，當然我們也可以想到定位去解決；當浮動和定位對于上下文布局影響太大，當然你要說一句再清除浮動，這話我沒法接，我只想說能不能少點代碼，有簡單的干嘛去復雜了寫，我們可以改變vertical-align的屬性，根據需求設置相關的值（top/middle/bottom），鑒于上面的實例我們試一下：
.item {
width: 150px;
height: 200px;
background: red;
display: inline-block;
vertical-align: top;
}
此時的效果：
有內容的和沒內容的已經完美“平等”，沒有“高低”
