解決多個img標籤之間出現間距問題

2021-10-13 12:40:08 字數 736 閱讀 9041

作為開發人員,我們在日常開發工作中經常會遇到由多個組成的頁面。雖然元素之間的填充值設定為零,但我們仍然可以看到兩張之間會有乙個難看的間隙,無法無縫拼接。

因此,簡單的檢查就可以看出,造成這種現象的原因是img是乙個內聯元素,而內聯元素的特點是「行布局」,這意味著內聯元素的預設對齊方式是與其父基線對齊,但開口高度確實是整體高度,包括從基線到底部的部分,所以會造成這種間隙。

那麼針對這種情況也有對應的幾種解決方法: 

1.設定元素display:block 

其實這種方法的主要實現原理就是把願意來的內聯元素變成塊級元素,既然你內聯元素有這種特性,那我就把你變成塊級元素,不存在這種特性那自然就不會有問題了   

2.設定元素float 

這種方法實現的原理主要是使元素脫離正常文件流,那麼就不會受這種baseline對齊的影響了 

3.設定父級元素font-size:0 

其實基線的位置是與字型相關的,不同的 font-size會影響到這個空隙的大小。父級的font-size設定為零,那麼元素也沒辦法以父級的基線為對齊標準了 

4.改變vertical-align的值 

既然元素預設對齊方式是以baseline對齊的,那麼通過改變vertical-align的值來改變元素的對齊方式那就不會有問題了

,由(七娃部落格 ) 整編而成。

解決img標籤間距問題

關於img標籤間距問題 多個img之間有間距,包含img標籤的div之間有間距。如下 1 doctype html 2 3 4 5 testtitle 6 7 head 8 9 10 11 12 13 div 14 15 16 17 18 div 19 20 21 22 23 div 24 body...

IMG標籤的間距問題

問題 包含img標籤的div之間有間距 垂直方向上有間距 在這裡插入描述 原因 塊級元素包含內聯元素如文字等時,內聯元素預設是和父級元素的baseline 基線 對齊的,而baseline又和父級元素底邊有一定的距離 這個距離和 font 有關,不一定是5px 所以與父元素的底邊有距離。解決方法 1...

多個Img標籤之間的間隙處理方法

1.多個標籤寫在一行 alt 鬱金香 alt 鬱金香 height 100px alt 鬱金香 alt 鬱金香 height 100px 效果前 效果後 2.將要閉合標籤的地方與開始標籤的地方重合 alt 鬱金香 alt 鬱金香 height 100px 3.使用注釋頭尾相連 alt 鬱金香 alt...