css去除inline-block間隙

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

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

先問為什么display:inline-block的元素會存在間隙？參考overstackflow上的一個答案

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.除空格和換行

    測試測試測試

也可以更改成這樣

    測試測試測試

~~2.使用margin-right設置負邊距~~

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

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

火狐(Gecko)

360極速(Blink)

Chorme(Blink)

3.使用font-size：0

在父級元素上設置font-size為0，在元素上設置實際需要得font-size即可

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


    測試
    測試

4.使用letter-spacing

給父級元素設置一個較大在負值，在元素上將letter-spacing歸0。


    測試
    測試

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

GPU云服務器云服務器 inline-block 最大間隙間隙圖片有間隙

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

轉載請注明本文地址：http://www.hztianpu.com/yun/112872.html

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

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

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

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

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

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

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

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

binaryTree 2019-08-01 15:01 評論0 收藏0
white-space:nowrap 的妙用

摘要：對于多個元素同在同一行的布局，如比較常見的是輪播。因此最好顯式設置的垂直方向上的對齊。做法一的案例有淘寶首頁的主輪播通過子元素浮動，父元素清除浮動。可看出這與與應用了的文本容器效果一樣。上的效果，應該也一樣。對于多個元素同在同一行的布局，如比較常見的是輪播。下面我將探討這這一布局的做法：首先約定html結果如下： div.row div.col div.col di...

qqlcbb 2019-08-30 12:55 評論0 收藏0