vertical-align的百分比值是相對(duì)于line-height計(jì)算的
{ line-height:100px;
?vertical-align:-50%;?? //?? -50px
}
多出來的空白間隙梯找？
<div style="background:red"><img src="2.jpg" /><div>
對(duì)于內(nèi)聯(lián)元素余寥，vertival-align和line-height"到處都是"
在HTML5文檔聲明下屏鳍，塊狀元素內(nèi)部的內(nèi)聯(lián)元素的行為表現(xiàn)，就好像塊狀元素內(nèi)部還有一個(gè)（更有可能兩個(gè)-前后）看不見摸不著沒有寬度沒有實(shí)體的空白節(jié)點(diǎn)吧兔，這個(gè)假想又似乎存在的空白節(jié)點(diǎn)，我稱之為“幽靈空白節(jié)點(diǎn)”
如何清除這個(gè)“幽靈空白節(jié)點(diǎn)”抡爹？
1.讓vertical-align失效
img{ display:block; }
2. 使用其他vertical-align的值
告別baseline, 取用其他屬性值掩驱，比方說bottom/middle/top都是可以的。
3.直接修改line-height的值
只要行高足夠小冬竟，一般設(shè)置為0
div{ line-height: 0}
4.因?yàn)閘ine-height為相對(duì)單位欧穴，由font-size間接控制
div{ font-size: 0 }
應(yīng)用-借用“幽靈空白節(jié)點(diǎn)”實(shí)現(xiàn) 任意尺寸的圖片（或者內(nèi)聯(lián)塊狀化的多行文字）的垂直居中效果
<div><img src="2.png" /></div>
div{ line-height: 240px; font-size: 0}? // 行高繼承給"幽靈空白節(jié)點(diǎn)"，類似手動(dòng)添加個(gè) <i>標(biāo)簽; font-size 為0實(shí)現(xiàn) 絕對(duì)居中
img{ vertival-align: middle }
inline-block和baseline關(guān)系
規(guī)范：
一個(gè)inline-block元素泵殴，如果里面沒有inline內(nèi)聯(lián)元素涮帘，或者overflow不是visible，則該元素的基線就是其margin底邊緣笑诅，否則调缨，其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線。
span{display:inline-block;width:150px;height:200px;border:1px solid green;background:#999}
<span></span>
<span>x-baseline</span>
