這篇文章給大家分享的是有關(guān)如何解決Img圖片底部空白縫隙問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
茂名網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),茂名網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為茂名近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)要多少錢(qián),請(qǐng)找那個(gè)售后服務(wù)好的茂名做網(wǎng)站的公司定做!
最近做項(xiàng)目發(fā)現(xiàn)引用圖片時(shí)下方總出現(xiàn)空白,情況如下圖所示。
后發(fā)現(xiàn)原因是行內(nèi)塊元素會(huì)和文字的基線對(duì)齊,要解決這個(gè)問(wèn)題其實(shí)很簡(jiǎn)單,主要方法有兩種:
1. 給圖片添加 vertical-align: middle | top | bottom 等。(推薦使用)
img { vertical-align: bottom; }
2. 把圖片轉(zhuǎn)換為塊級(jí)元素 display: block; (轉(zhuǎn)換塊級(jí)元素可能會(huì)影響你的布局,所以推薦使用第一種)
g { display: block; }
好啦,問(wèn)題就這么簡(jiǎn)單的解決了。
感謝各位的閱讀!關(guān)于“如何解決Img圖片底部空白縫隙問(wèn)題”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!