HTML圖片下方出現(xiàn)空行的解決方法
在HTML中處理圖片時(shí),有時(shí)候會(huì)發(fā)現(xiàn)圖片跟下方邊框之間存在一個(gè)空行,盡管屬性設(shè)置中并沒有這樣的設(shè)定。那么面對(duì)這種情況,我們應(yīng)該怎么辦呢? 步驟一:插入多張圖片 首先,在HTML中插入多張圖片,并對(duì)
在HTML中處理圖片時(shí),有時(shí)候會(huì)發(fā)現(xiàn)圖片跟下方邊框之間存在一個(gè)空行,盡管屬性設(shè)置中并沒有這樣的設(shè)定。那么面對(duì)這種情況,我們應(yīng)該怎么辦呢?
步驟一:插入多張圖片
首先,在HTML中插入多張圖片,并對(duì)其添加修飾。
步驟二:浮動(dòng)圖形
目前,我們的效果是三個(gè)小圖被包含在一個(gè)大框內(nèi),大框的邊框?yàn)榧t色。
步驟三:清除浮動(dòng)
為了使這三個(gè)圖形橫排顯示,我們需要將它們進(jìn)行浮動(dòng)。然而,由于浮動(dòng)的緣故,原本紅色邊框無法擴(kuò)展整個(gè)容器。因此,我們需要在父級(jí)元素中添加overflow:hidden;
屬性或在浮動(dòng)元素后面添加clearfix清除浮動(dòng)的命令。
步驟四:去除空行間隔
此時(shí),你可能會(huì)注意到圖形與下方紅色邊框之間存在一個(gè)空行間隔。
步驟五:設(shè)置圖像為塊級(jí)元素
為了解決空行間隔的問題,我們可以將lt;imggt;
元素設(shè)置為塊級(jí)標(biāo)簽。
步驟六:消除間隔
通過以上設(shè)置,圖形與下方邊框之間的間隔將會(huì)消失,達(dá)到預(yù)期效果。