問題描述
在作一個背景圖片更改效果的時候，發現圖片在加了邊框以後，在圖片的下面會出現一個空表的縫隙
以下圖所示，在四個小圖片下面會有一個縫隙
spa
問題分析
這是因爲形如圖片的行內塊元素的默認垂直對齊方式是基線對齊（baseline）,給文字預留了部分顯示空間（即被文字佔用）。
說到垂直對齊方式，就要對四種不一樣的準線進行描述。
以下圖所示，基線和底線之間還留有部分距離。
因爲默認的對齊狀況是按照英文的基線對齊，在不對垂直對齊方式進行調整的狀況下，因爲是基線對齊，圖片的下面就會產生空白縫隙的狀況。
3d
解決方案
方案1：
所以咱們只須要將vertical-align其改成非baseline (bottom、middle、top)便可。
對圖片使用vertical-align屬性，
修改效果以下：
這就使得下面的空白縫隙得以去除。
注：文字能夠刪掉
（文字添加是爲了幫助問題描述，文字是否存在不會影響這個縫隙的產生）
blog
方案2：
因爲這個縫隙是因爲行內塊引發的，所以咱們也能夠採用將圖片的顯示效果改成block，方可解決。
圖片
修改效果以下：
class