為什么inline-block帶有文本和不帶文本vertical-align表現(xiàn)不一樣
帶有文本的inline-block, 好像是和最后一行的文本基線對齊
<div?style="height:300px;line-height:300px;background:red;"> ????some?text... ????<span?style="line-height:normal;display:inline-block;height:200px;background:blue;width:100px;"> ????????text?in?inline-block... ????</span> </div>
不帶文本的inline-block，好像是inline-block的底部邊緣和文本的基線對齊
<div?style="height:300px;line-height:300px;background:red;"> ????some?text... ????<span?style="line-height:normal;display:inline-block;height:200px;background:blue;width:100px;"> ????????<!--?no?text?in?inline-block...?--> ????</span> </div>
為什么會有這種差別呢
2016-09-19
css2的官方規(guī)定，inline-block元素如果里面是空的，或有overflow屬性，基線就是底邊緣，否則基線就是由里面的文字或圖片決定的。