在 img 元素的父元素中，試著顯示出背景或 border 時，發現 img 元素之下，會產生一道小小的間隙，紅框處這並非瀏覽器的 bug，而是依照 CSS 的規格，vertiical-align的起始值為 「 baseline 」，因此圖像下方會對齊「 baseline 」的位置而產生此現象。我們在使用IE6、IE7、IE8、googleChrome、FireFox瀏覽器時，有時候加入圖片CSS下方會產生一些間隙和空一行，那要如何解決呢？來教大家如何解決跨瀏覽器兼容這些問題！
解決方式
方法一：更變vertical-align的質
只要將vertiical-align屬性的值，從起始值的「baseline」變更為對齊該行整理下方的「bottom」即可。由於vertiical-align是行內元素中可直接設定的屬性，因此只要以img元素為套用對象，設定「vertiical-align:bottom;」，則圖像下方的間隙就會消失。
HTML程式碼：
< h1 > < img scr "PKstep.jpg " /> < / h1 >
CSS程式碼 ：
h1 { background-color： #FFFFFF；}
img { vertiical - align： bottom；}
方法二：改變區塊屬性
由於vertiical-align屬性是設定行內元素(以及th元素及td元素)之垂直位置的屬性，所以不會影響區塊層級元素。因此在img元素中設定「display:block;」的話，圖像下方就不會出現間隙了。
HTML程式碼：
< h1 > < img scr " PKstep.jpg " /> < / h1 >
CSS程式碼 ：
h1 { background-color： #FFFFFF；}
img { display：block；}
實用教學延伸閱讀
♦CHROME遠端桌面教學：手機控制電腦、和他人連線PC共用。免安裝軟體！
♦手機影片製作軟體：小影視頻APP，剪接影片超好用
♦Microsoft Word：讓WORD首頁封面不加入頁碼、不要顯示浮水印
Ten articles before and after
2022最新麥當勞價格表整理！早餐、超值全餐、1+1、甜心卡＆單點價錢。
【GifMaker Effects】線上將靜態圖片變成動畫，加上扭曲、模糊等動態特效。
FaceApp變換照片中的人臉表情！增加魅力的笑容、變成老人的樣子，還能換性別哦（Android、iOS）
快速搜尋Emoji表情符號列表，並對照在FB,Apple,Android,Twitter,PC裝置呈現的樣子。
《Rotation Control》強制控制手機&平板旋轉方向的App，讓螢幕畫面固定在正反、左右橫向。（Android）
內容農場檢查器App－封鎖不實的假新聞，並攔截垃圾網站的低品質文章！（Android）
防止不小心打開垃圾文章，『封鎖內容農場工具』在開啟網頁前彈出警告。（Chrome外掛）
不小心刪掉相片？快用「照片復原App」救回手機中誤刪的照片！免Root找回最齊全的檔案。（Android）