去除display:inline-block的间隙问题

caiyongji 发布于2019-08-30 11:12 / 583人阅读

摘要：元素间间距方案方案方案该值与父级字体大小有关方案其他更多方案

inline-block元素间间距demo

</>复制代码 
   
item1
   
item2
   
item3
   
item4
   
item5

方案 1

</>复制代码 
ul:{
font-size:0;
}

方案 2

</>复制代码 
   
item1
item2
item3
item4
item5
//or
   
item1
item2
item3

方案 3

</>复制代码 
li {margin-right: -3px;}

-3px,该值与父级字体大小有关

方案 4

</>复制代码 
   
item1 
 
item2 
 
item3
 
item4 
 
item5

6 其他更多方案 more

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

转载请注明本文地址：https://www.ucloud.cn/yun/114841.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
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
去除display:inline-block的间隙问题

摘要：元素间间距方案方案方案该值与父级字体大小有关方案其他更多方案 inline-block元素间间距demo item1 item2 item3 item4 item5 ul{list-style: none;} li{display: inline-block;} 方案 1 ul:{ font-size:0; } 方案 2 item1i...

Aomine 2019-08-02 15:18 评论0 收藏0
css去除inline-block间隙

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

ad6623 2019-08-01 18:13 评论0 收藏0