css去除inline-block间隙

ivan_qhz 发布于2019-08-29 14:01 / 2741人阅读

摘要：先问为什么的元素会存在间隙参考上的一个答案去除方法除空格和换行测试测试测试也可以更改成这样测试测试测试使用设置负边距此方法不靠谱，在不同的浏览器下空格的大小并不统一，无法一次性解决问题火狐极速使用在父级元素上设置为，在元素上

先问为什么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设置负边距~~

此方法不靠谱，在不同的浏览器下空格的大小并不统一，无法一次性解决问题

    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;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112872.html

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

摘要：父容器设置优点弹性布局可以去除多余间隙，而且可以轻松的实现垂直居中，水平居中等效果。缺点过低版本的浏览器不支持该属性。什么是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间隙

摘要：先问为什么的元素会存在间隙参考上的一个答案去除方法除空格和换行测试测试测试也可以更改成这样测试测试测试使用设置负边距此方法不靠谱，在不同的浏览器下空格的大小并不统一，无法一次性解决问题火狐极速使用在父级元素上设置为，在元素上先问为什么display:inline-block的元素会存在间隙？参考overstackflow上的一个答案 This is exactly what the...

ad6623 2019-08-01 18:13 评论0 收藏0
inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致原因分析：使用inline-block属性在IE下会...

learn_shifeng 2019-08-28 18:30 评论0 收藏0
inline-block兼容及间隙问题

摘要：一兼容性不识别但可以触发块元素，其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置，使用触发。一、兼容性： 1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持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