1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 解決網頁img圖片垂直堆疊時,下方出現莫名的空白間隙
CSS CSS2 網頁開發

解決網頁img圖片垂直堆疊時,下方出現莫名的空白間隙

2020/07/27

梅問題-解決網頁插入img圖片時,下方出現莫名的空白間隙
  最近在切版時,讓梅干無意間發現一個超怪的現象,當把圖片以堆疊的方式放置時,照理理說圖片中間未設置任何的間隙,圖片與圖片間,應該會緊密接合在一起,但卻出現一個約10像素的莫名空白間隙,起初梅干以為會不會是DIV中的內距沒有歸零,但將它歸零甚至把DIV拿掉,單純放直IMG圖片,底部一樣出現一個空白間隙,找了好久才發現,原來這是圖片的一個小BUG,至於要怎麼修正這個問題,有遇到的朋友,現在就一塊來看看吧!

解決方法1
Step1
第一種方法,就在img加入vertical-align:top
梅問題-解決網頁插入img圖片時,下方出現莫名的空白間隙


這樣就可解決底部空白的間隙問題。
梅問題-解決網頁插入img圖片時,下方出現莫名的空白間隙
解決方法2
Step2
將img設為display:block;
梅問題-解決網頁插入img圖片時,下方出現莫名的空白間隙
這樣也可解決底部空白的間隙問題。
梅問題-解決網頁插入img圖片時,下方出現莫名的空白間隙