解決img標籤上下出現間隙的方法

2022-08-31 06:30:13 字數 949 閱讀 7248

與父元素下邊緣有 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...