inline-block空白间距问题

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

二. 解决方案

1. html方式

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

 ABC

2）省略闭合标签

 A
 B
 C

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com