與父元素下邊緣有 2px 的間隙,並不是因為空格。多個 inline-block 元素之間的間隙才是因為空格。
任何不是塊級元素的可見元素都是內聯元素,其表現的特性是「行布局」形式。----《css權威指南》
如文字等內聯元素,它預設對齊方式都是和它的父級的 baseline 去進行對齊的,但是你對齊的是 baseline,撐開高度的卻是元素整體的高度(bottom line),這樣肯定就會造成一定的間隙
1.第一種解決方案
既然是 inline 元素才會發生這個問題,那我們自然可以簡單粗暴的解決這個問題,那就是給我們的元素「變個性」,讓它從 inline 變為 block 不就可以了麼?
2.第二種解決方案
這也太粗暴了,變了性別,回頭還怎麼愉快的玩耍呀,所以我們要嘗試曲線救活,我們可以去修改一下它的垂直對齊方式呀,這樣是不是就可以了呢?
vertical-align 的預設屬性就是 baseline ,我們只要設定了跟 baseline 不一樣的屬性,都可以避免這個問題。
baseline 預設
sub 垂直對齊文字的下標
super 垂直對齊文字的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字型的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊
text-bottom 把元素的底端與父元素字型的底端對齊
length
% 使用"line-height"屬性的百分比值來排列此元素。允許使用負值。
inherit 規定應該從父元素繼承vertical-align屬性的值
3.第三種解決方案
使用浮動,float
浮動雖好,可不要貪杯喲
4.第四種解決方案
父元素字型大小設成0
font-size: 0;
解決img object 標籤上下出現間隙的方法
這篇文章主要給大家介紹了解決img標籤上下出現間隙的方法,因為最近在工作中遇到了這個問題,所以想著記錄下來。方便自己或者有需要的朋友們參考借鑑,下面來一起看看吧。我們在平常的開發過程中,經常需要使用多張,而使用多張的時候,我們一般會去使用乙個列表來對我們的img 進行承裝。document 但是這個...
解決多個img標籤之間出現間距問題
作為開發人員,我們在日常開發工作中經常會遇到由多個組成的頁面。雖然元素之間的填充值設定為零,但我們仍然可以看到兩張之間會有乙個難看的間隙,無法無縫拼接。因此,簡單的檢查就可以看出,造成這種現象的原因是img是乙個內聯元素,而內聯元素的特點是 行布局 這意味著內聯元素的預設對齊方式是與其父基線對齊,但...
解決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...