解決同行等高inline-block元素對不齊的問題。
描述
在inline-block元素內加入長短不一的文本回季，部分元素出現(xiàn)了上浮現(xiàn)象家制。
預期與實際
關鍵
行內元素和替換元素的基線位于文本框的底端，無文本的塊狀行內元素泡一、圖片和非替換元素的基線就是元素的最底端颤殴。
當各元素之間的文本字體大小或者文本長度不一致時，基線的位置也會發(fā)生改變鼻忠，頁面會呈現(xiàn)更加的“混亂”狀態(tài)涵但，但實際上還是參照基線對齊的朝墩。
行內元素與替換元素默認vertical-align: baseline;向族。
如圖：
baseline
方法
由于本例中的inline-block元素等高赖钞，因此設置vertical-align: top/middle/bottom;即可睬澡，其他情況按需選擇钻哩。
代碼示例：
<div class="wrap">
<span></span>
<span>Lorem</span>
<span>Lorem ipsum dolor sit</span>
<span></span>
</div>
span {
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
vertical-align: top;/*也可設置為bottom/middle*/
color: #fff;
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
效果：
效果
