解決div里面img的縫隙問題

img在網頁中直接放的話,底部會有一個很小的縫隙,解決方法


  第一,給圖片img標簽display:block。

  img{display:block}

  第二,定義容器里的字體大小為0。

  div {

  width:110px;

  border:1px solid #000000;

  font-size:0

  }

  第三,定義圖片img標簽vertical-align:bottom,vertical-align:middle,vertical-align:top

  img{vertical-align:bottom}

  其他還有把圖片下邊距設為負值和改寫HTML標簽的排列。我覺得前三種就完全可以解決了。

  造成圖片在IE下與容器下邊界有空隙的原因


  圖片文字等inline元素默認是和父級元素的baseline對齊的,而baseline又和父級底邊有一定距離(這個距離和 font-size,font-family 相關,不一定是 5px),所以設置 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現。而且不光li,其他的block元素中包含img也會有這個現象。

  至于這里的HTML屬性align=”center”(對于圖片瀏覽器會處理成align=”middle”),就相當于vertical-align:middle; 所以道理也是一樣的,只要vertical-align不取baseline,這個空隙就消失了。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 這篇文字里我會介紹50 個便于使用的 CSS2/CSS3 代碼片段給所有的WEB專業人員. 選擇IDE開發環境來存...
    JamHsiao_aaa4閱讀 1,269評論 0 3
  • 春節馬上就過去了,春節一年又開始忙碌了,節日吃的好好,又胖三斤!苦逼上班的日子又開始了。 上班,人們見面...
    狼刀閱讀 145評論 0 0
  • 湖光燈影,垂柳搖曳,獨自漫步西湖蘇堤,不覺有些惆悵。想打個電話給某個朋友,卻想不到打給誰,突然感悟,是不是自己的知...
    Frank7閱讀 153評論 0 0
  • 我這個人沒別的壞毛病,就是懶。 額關于偷懶的話我發表下我的意見: 第一,想偷懶還得本身硬,就算你偷懶舍不得趕你走啊...
    華而又實閱讀 235評論 0 0