問題描述
在做一個背景圖片更改效果的時候，發現圖片在加了邊框之后，在圖片的下面會出現一個空表的縫隙
如下圖所示，在四個小圖片下面會有一個縫隙
問題分析
這是由于形如圖片的行內塊元素的默認垂直對齊方式是基線對齊（baseline）,給文字預留了部分顯示空間（即被文字占用），
說到垂直對齊方式，就要對四種不同的準線進行描述，
如下圖所示，基線和底線之間還留有部分距離，
由于默認的對齊情況是按照英文的基線對齊，在不對垂直對齊方式進行調整的情況下，由于是基線對齊，圖片的下面就會產生空白縫隙的情況，
解決方案
方案1：
因此我們只需要將vertical-align其改為非baseline (bottom、middle、top)即可，
對圖片使用vertical-align屬性，
修改效果如下：
這就使得下面的空白縫隙得以去除，
注：文字可以刪掉
（文字添加是為了幫助問題描述，文字是否存在不會影響這個縫隙的產生）
方案2：
由于這個縫隙是由于行內塊引起的，因此我們也可以采用將圖片的顯示效果改為block，方可解決，
修改效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/22965.html
標籤：其他