# overflow:hidden display:inline-block 行內對齊問題 <iframe width="100%" height="300" src="//jsrun.net/rBiKp/embedded/all/light/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> 首先引用規范中的這句話： > The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge. 這句話的意思是行級盒的baseline是這盒子下面的正常流中的最后一個行盒，除非給這個盒子以overflow不為visible的值。 也就是說，當overflow不為visible時，這個盒子的baseline就不遵循“行級盒的baseline是這盒子下面的正常流中的最后一個行盒”這一規則了。 緊接著又說了，此時的baseline是這個盒子的下外邊bottom margin edge（BFC元素底邊界） 那個span給了overflow:hidden后，它的baseline變成了它的下外邊了，而其它兩個行級盒的baseline是在下底邊靠上一點的位置。而這三個行級盒默認的vertical-align值是baseline的，所以才會那樣對齊。 所以解決辦法就是讓其基線保持一致，vertical-align:bottom|top