在 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首頁封面不加入頁碼、不要顯示浮水印
♦手機影片製作軟體：小影視頻APP，剪接影片超好用
♦Microsoft Word：讓WORD首頁封面不加入頁碼、不要顯示浮水印