您好,欢迎来到刀刀网。
搜索
您的当前位置:首页inline-block空白间距问题

inline-block空白间距问题

来源:刀刀网


一. 问题

元素是inline-block属性时,会有空白间隙

二. 解决方案

1. html方式

1)将元素之间的空隙去除

ABC

2)省略闭合标签

2. css方式

1. 使用margin负值(不同浏览器margin-right值可能不一样)

.space a {
 display: inline-block;
 margin-right: -3px;
}

2. font-size:0(IE7会有1px的间隙)

.space {
 font-size: 0;
}
.space a {
 font-size: 12px;
}

3. letter-spacing负值(Opera浏览器最小间距1px,letter-spacing再小就还原了)

.space {
 letter-spacing: -3px;
}
.space a {
 letter-spacing: 0;
}

4. word-spacing负值

.space {
 display:inline-table;(为了兼容Chrome)
 word-spacing: -6px;
}
.space a {
 word-spacing: 0;
}

三. inline-block和baseline

https://segmentfault.com/a/1190000002668492

Copyright © 2019- gamedaodao.com 版权所有 湘ICP备2022005869号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务