1. 程式人生 > 實用技巧 >兩個影象標籤並排放置產生空隙的原因及解決方法

兩個影象標籤並排放置產生空隙的原因及解決方法

程式碼:在這裡插入圖片描述
執行結果:在這裡插入圖片描述
中間有條明顯的縫隙,產生的原因:圖片屬於行內元素,行內元素在程式碼中換行後頁面會出現一個空格位。

解決方法:

第一種:最簡單,就是不換行
在這裡插入圖片描述
第二種:浮動 , 左右浮動都可以
在這裡插入圖片描述
第三種:margin給負值,具體值根據實際情況而定
在這裡插入圖片描述
第四種:定位 ,相對定位和絕對定位都可以,絕對定位和浮動一樣,脫離文字流
在這裡插入圖片描述
第五種:在margin外層新增letter-spacing,給負值
在這裡插入圖片描述
以上方法,執行結果都一樣
在這裡插入圖片描述