詳解CSS清除圖片下幾像素空白間隙的方法
發(fā)布時間：2020-09-14 15:11:17 作者：青島星網(wǎng) 
我要評論
我要評論這篇文章主要介紹了CSS清除圖片下幾像素空白間隙的方法 ,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
最近有伙伴問小編的問題：
頁面排版的時候發(fā)現(xiàn)圖片下面有那么1-2像素的間隙空白，怎么去除。
這個是瀏覽器的一個設(shè)計問題。img本來是行內(nèi)元素，卻可以用width 和height,當父元素沒有設(shè)置高度的時候，用子元素們的高度計算出的高度給父元素的時候就會出現(xiàn)3px空隙這類的問題。
去除圖片下間隙的方法一
img{display:block;}
方法2
img{vertical-align:top;}
除了top值，還可以設(shè)置為text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以
方法3
#qdxw{font-size:0;line-height:0;}
#qdxw為img的父元素
總結(jié)
到此這篇關(guān)于詳解CSS清除圖片下幾像素空白間隙的方法 的文章就介紹到這了,更多相關(guān)css 清除圖片幾像素空白間隙內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)
這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以2020-02-25
這篇文章主要介紹了詳解CSS 去掉inline-block元素間隙的幾種方法，這些間隙會導(dǎo)致一些布局上的問題，需要把間隙去掉。非常具有實用價值，需要的朋友可以參考下2018-11-13- 這篇文章主要介紹了CSS圖片下面有間隙的6種解決方案,需要的朋友可以參考下2017-09-11
這篇文章主要介紹了css幾種解決inline-block間隙的方案(整理),具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-16css解決display:inline-block;產(chǎn)生的縫隙（間隙）的方法
本篇文章主要介紹了css解決display:inline-block;產(chǎn)生的縫隙（間隙）的方法，具有一定的參考價值，有需要的可以了解一下。2016-12-14
