css去除inline-block間隙

ivan_qhz 發(fā)布于2019-08-29 14:01 / 2869人閱讀

摘要：先問為什么的元素會(huì)存在間隙參考上的一個(gè)答案去除方法除空格和換行測(cè)試測(cè)試測(cè)試也可以更改成這樣測(cè)試測(cè)試測(cè)試使用設(shè)置負(fù)邊距此方法不靠譜，在不同的瀏覽器下空格的大小并不統(tǒng)一，無法一次性解決問題火狐極速使用在父級(jí)元素上設(shè)置為，在元素上

先問為什么display:inline-block的元素會(huì)存在間隙？參考o(jì)verstackflow上的一個(gè)答案

This is exactly what they should do.Spaces between inline elements are no different from spaces between words.If you don"t want that, use block elements, or set the font size to zero.

去除方法 1.除空格和換行

    測(cè)試測(cè)試測(cè)試

也可以更改成這樣

    測(cè)試測(cè)試測(cè)試

~~2.使用margin-right設(shè)置負(fù)邊距~~

此方法不靠譜，在不同的瀏覽器下空格的大小并不統(tǒng)一，無法一次性解決問題

    span{
           display: inline-block;
           margin-right: -4px;
           color: white;
           background-color: black;
       }

火狐(Gecko)

360極速(Blink)

Chorme(Blink)

3.使用font-size：0

在父級(jí)元素上設(shè)置font-size為0，在元素上設(shè)置實(shí)際需要得font-size即可

div{
    font-size: 0;
}
span{
    display: inline-block;
    font-size: 16px;
}


    測(cè)試
    測(cè)試

4.使用letter-spacing

給父級(jí)元素設(shè)置一個(gè)較大在負(fù)值，在元素上將letter-spacing歸0。


    測(cè)試
    測(cè)試

div{
   letter-spacing: -20px;
}
span{
    display: inline-block;
    letter-spacing: 0;
}

GPU云服務(wù)器云服務(wù)器 inline-block 最大間隙間隙圖片有間隙

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112872.html

相關(guān)文章

深入css之去除inline-block元素之間的多余間隙

摘要：父容器設(shè)置優(yōu)點(diǎn)彈性布局可以去除多余間隙，而且可以輕松的實(shí)現(xiàn)垂直居中，水平居中等效果。缺點(diǎn)過低版本的瀏覽器不支持該屬性。什么是inline-block之間的多余間隙考慮以下代碼： One Two Three nav a { display: inline-block; //或者inline; padding: 5px; background: red; }...

caspar 2019-08-30 13:47 評(píng)論0 收藏0
css去除inline-block間隙

摘要：先問為什么的元素會(huì)存在間隙參考上的一個(gè)答案去除方法除空格和換行測(cè)試測(cè)試測(cè)試也可以更改成這樣測(cè)試測(cè)試測(cè)試使用設(shè)置負(fù)邊距此方法不靠譜，在不同的瀏覽器下空格的大小并不統(tǒng)一，無法一次性解決問題火狐極速使用在父級(jí)元素上設(shè)置為，在元素上先問為什么display:inline-block的元素會(huì)存在間隙？參考o(jì)verstackflow上的一個(gè)答案 This is exactly what the...

ad6623 2019-08-01 18:13 評(píng)論0 收藏0
inline-block兼容及間隙問題

摘要：一兼容性不識(shí)別但可以觸發(fā)塊元素，其它主流瀏覽器均支持。兩個(gè)要先后放在兩個(gè)樣式聲明中才有效果直接設(shè)置，使用觸發(fā)。一、兼容性： 1. IE6、IE7不識(shí)別inline-block但可以觸發(fā)塊元素，其它主流瀏覽器均支持inline-block。注：在行內(nèi)元素上使用display:inline-block,IE6、7與其他瀏覽器效果一致原因分析：使用inline-block屬性在IE下會(huì)...

learn_shifeng 2019-08-28 18:30 評(píng)論0 收藏0
inline-block兼容及間隙問題

摘要：一兼容性不識(shí)別但可以觸發(fā)塊元素，其它主流瀏覽器均支持。兩個(gè)要先后放在兩個(gè)樣式聲明中才有效果直接設(shè)置，使用觸發(fā)。一、兼容性： 1. IE6、IE7不識(shí)別inline-block但可以觸發(fā)塊元素，其它主流瀏覽器均支持inline-block。注：在行內(nèi)元素上使用display:inline-block,IE6、7與其他瀏覽器效果一致原因分析：使用inline-block屬性在IE下會(huì)...

binaryTree 2019-08-01 15:01 評(píng)論0 收藏0
white-space:nowrap 的妙用

摘要：對(duì)于多個(gè)元素同在同一行的布局，如比較常見的是輪播。因此最好顯式設(shè)置的垂直方向上的對(duì)齊。做法一的案例有淘寶首頁(yè)的主輪播通過子元素浮動(dòng)，父元素清除浮動(dòng)?？煽闯鲞@與與應(yīng)用了的文本容器效果一樣。上的效果，應(yīng)該也一樣。對(duì)于多個(gè)元素同在同一行的布局，如比較常見的是輪播。下面我將探討這這一布局的做法：首先約定html結(jié)果如下： div.row div.col div.col di...

qqlcbb 2019-08-30 12:55 評(píng)論0 收藏0