【HTML+CSS兼容性】 li中插入img元素之間存在空隙BUG問(wèn)題+解決方案 前端小白必知!
「?? 作者：極客小俊」
「?? 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」
場(chǎng)景問(wèn)題描述
環(huán)境測(cè)試: Chrome、Edge、Opera、FireFox
舉個(gè)栗子
當(dāng)你在li元素中直接放入圖片img元素之后, 默認(rèn)就會(huì)出現(xiàn)一個(gè)bug, 也就是圖片顯示相互之間存在間隙,
即便是你把所有元素的內(nèi)外邊距都清除之后，還是存在這個(gè)問(wèn)題!
代碼案例
html
<ul>
? ?<li><img src="img/test.jpeg" width="100"/></li>
? ?<li><img src="img/test.jpeg" width="100"/></li>
? ?<li><img src="img/test.jpeg" width="100"/></li>
</ul>
css
* {
? ?margin: 0px;
? ?padding: 0px;
}
ul > li {
? ?border: 1px solid red;
}
如圖
問(wèn)題分析
首先，其實(shí)我們要明白一點(diǎn)，其實(shí)這里不一定就是li元素的問(wèn)題, 很多人以為是li元素導(dǎo)致的,所以就拼了老命去設(shè)置li元素, 當(dāng)然這樣的確也是可以解決問(wèn)題的，但是沒(méi)有找準(zhǔn)重點(diǎn)!
你不信？ 那么你把li元素 ul元素都去掉,再去看看效果
如圖
所以從上圖看,雖然說(shuō)li元素也有默認(rèn)的行間距，即便是你去掉了li這些元素的內(nèi)外邊距，間隙依舊是存在的!
那么這是為什么呢?
解釋
這主要是由于img圖片默認(rèn)的垂直對(duì)齊方式和行間距的影響
默認(rèn)情況下，圖片的vertical-align屬性值為baseline 簡(jiǎn)單的說(shuō)也就是因?yàn)檫@個(gè)屬性產(chǎn)生的間隙
那么問(wèn)題來(lái)了,那么我怎么去驗(yàn)證一下img圖片的vertical-align屬性默認(rèn)值就為baseline呢？
提示:
關(guān)于baseline(基線)是什么意思，還有包括頂線、中線、基線、底線、x-height、ex、內(nèi)聯(lián)盒模型、行距這些概念我這里就不過(guò)多贅述了，之前我也發(fā)布過(guò)對(duì)這些詳細(xì)研究之后的總結(jié)文章,有興趣的朋友可以去看看,相當(dāng)精彩!
搜索標(biāo)題如下:
回到正題, 如果你實(shí)在是不信，也可以反向的去測(cè)試一下，
比如說(shuō)你就給img元素 直接加上一個(gè)vertical-align:baseline 看看效果 是不是一樣的
img{
? ?vertical-align: baseline;
}
相信你看到的結(jié)果還是有間隙的,對(duì)吧
所以對(duì)于大多數(shù)瀏覽器來(lái)說(shuō)，vertical-align:baseline 就是 img 元素的默認(rèn)垂直對(duì)齊方式
總之就因?yàn)閳D片的vertical-align屬性值為baseline,導(dǎo)致圖片在li元素中與文本的基線對(duì)齊，從而引起空隙!
解決方案
方法1
我們可以直接通過(guò)自己的需求設(shè)置img元素的vertical-align屬性為top、middle、bottom
這樣讓圖片在li元素中頂部對(duì)齊或居中對(duì)齊，從而消除空隙
img{
? ?vertical-align: middle;
}
方法2
設(shè)置img元素父級(jí)容器font-size:0 也可以解決間隙問(wèn)題, 比如我這里的父級(jí)容器就是li元素
ul > li {
? ?border: 1px solid red;
? ?font-size: 0;
}
通過(guò)調(diào)整li元素的font-size屬性為0，可以去除li元素的默認(rèn)行間距
那么這是為什么呢？
原因如下:
我們將li元素的font-size屬性設(shè)置為0的目的是為了去除li元素默認(rèn)的行間距。
在默認(rèn)情況下，li元素會(huì)有一個(gè)默認(rèn)的行高，即使沒(méi)有文本內(nèi)容也會(huì)存在一定的空隙,
注意:有些人說(shuō)設(shè)置ul元素的line-height:0這種方式我不太推薦!
通過(guò)將font-size屬性設(shè)置為0，可以讓li元素的文本大小為0，從而使行高為0，進(jìn)而消除了li元素的默認(rèn)行間距,這樣，即使li元素中沒(méi)有文本內(nèi)容，也能夠達(dá)到去除空隙的效果。
但是設(shè)置font-size屬性為0會(huì)影響li元素自身的文本, 可能子元素中的文字大小也會(huì)被影響。
所以如果需要保留li元素內(nèi)部的文字或其他內(nèi)容的顯示,可以通過(guò)給子元素重新設(shè)置合適的font-size屬性來(lái)解決這個(gè)問(wèn)題!
代碼如下
* {
? ?margin: 0px;
? ?padding: 0px;
}
ul > li {
? ?border: 1px solid red;
? ?font-size: 0;
}
ul > li>span{
? ?font-size: 12px;
}
img{
? ?vertical-align: bottom;
}
方法3
你也可以給img元素設(shè)置為塊級(jí)元素 或者 浮動(dòng)元素，也是可以解決間隙問(wèn)題, 使圖片與文本緊密排列，從而解決空隙問(wèn)題，然后根據(jù)具體需求繼續(xù)調(diào)整圖片的位置即可!
img{
? ?display:block;
}
效果
通過(guò)上述方法 我們修改之后，就可以基本上解決間隙的問(wèn)題了!
如圖
如果文章對(duì)你有幫助的話就請(qǐng)
??點(diǎn)贊 ??評(píng)論 ??收藏
一鍵三連哦！
??????????
如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，????歡迎在下面 ?? 留個(gè)言指出!
或者你有更好的想法，歡迎一起交流學(xué)習(xí)????????????
