這篇文章給大家分享的是有關(guān)去除CSS的inline-block換行引起間隙的方法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為汕城企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè),汕城網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
對于內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素的使用存在一個(gè)問題,即在顯示源代碼上存在的換行符時(shí)會形成空白,本篇文章將給大家介紹關(guān)于如何消除CSS的inline-block換行引起的間隙。
inline-block使用時(shí)出現(xiàn)間隙的原因
inline-block可以像內(nèi)聯(lián)元素一樣處理,能夠簡單地進(jìn)行橫排,并且能夠給出水平寬度和垂直寬度等。這是一個(gè)非常方便的設(shè)置,所以可以有很多的用處。
但是與此同時(shí),我們在使用inline-block的過程中經(jīng)常會遇到所謂間隙的問題,我們來看一個(gè)例子
HTML
CSS
.container { display: block; border: 1px #000 solid; } .inline-contents { width: 33.3333%; height: 200px; display: inline-block; background-color: #66b6d5; }
效果如下:
從上面的圖片我們可以明顯的看到右邊和下邊沒有設(shè)定數(shù)值,卻出現(xiàn)了間隙
因此,width : 33.3333%(也就是1 / 3以下)的三個(gè)盒子明明應(yīng)該橫排,最后一個(gè)盒子卻另起一行。
即使此次設(shè)置了box-sizing,margin和padding設(shè)置為0,也沒有變化。
inline - block作為inline元素的側(cè)面不只是「橫向排列」的事,也可能會影響諸如font-size和line-height之類的值。
如何消除inline - block的間隙
可以在下面出現(xiàn)的間隙是字母的默認(rèn)設(shè)置,基線如圖所示,因此可以使用屬性來嘗試在下面留一點(diǎn)間隙。
(因此,如果將vertical-align:bottom;應(yīng)用于.inline-contents,則只會解決下面的間隙問題。)
旁邊的間隙是由于< div >之間的改行,所以全部取下來就解決了,但是代碼會看起來很,雖然可以在< div >之間寫注釋,但是可能有點(diǎn)麻煩,其實(shí),只在父元素(.container)中寫一個(gè)“font-size:0;”的值就解決了。
為什么要說是父元素,因?yàn)樵O(shè)定了inline-block的元素本身就具有“字符”的特征。
我們來看一個(gè)例子
HTML
aaaaaa
aaaaaa
CSS
.container { display: block; border: 1px #000 solid; font-size: 0; } .inline-contents { width: 33.3333%; height: 200px; display: inline-block; background-color: #66b6d5; font-size: 16px; }
在inline-block內(nèi)輸入文字的時(shí)候,如果新的inlin-block設(shè)定font-size就可以了。
但是,每個(gè)盒子中文字的行數(shù)不同的話,會發(fā)生這樣的情況。
在這種情況下,通過將vertical-align:bottom;以及font-size添加到inline-block來解決它。
CSS
.container { display: block; border: 1px #000 solid; font-size: 0; } .inline-contents { width: 33.3333%; height: 200px; display: inline-block; background-color: #66b6d5; font-size: 16px; vertical-align: bottom; }
效果如下:
感謝各位的閱讀!關(guān)于去除CSS的inline-block換行引起間隙的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!