display:inline-block元素间距问题

2014-11-07阅读(6083)评论(6)牵着狗狗看MM

苏州实时公交查询

display:inline-block:众前端们都知道,其作用是将对象呈递为内联对象,但是对象的内容作为块对象呈递。
有如下代码

<div class="ac-btn">
                                        <a href="#" class="btn-save"></a>
                                        <a href="#" class="btn-print"></a>
                                    </div>

.ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}
.ac-btn .btn-save{background-position: 0 0;}
.ac-btn .btn-print{background-position: -73px 0;}

这样呈现的如下display-inline-block
2个元素之间有间隙,那么问题来了

为什么会出现间隙?

原因是inline-block允许空格,出现空隙的罪魁祸首就是包括换行在内的空白符。

如何消除间隙?

对父级元素设置font-size:0

即上述CSS代码改为

.ac-btn {font-size:0;}
.ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}
.ac-btn .btn-save{background-position: 0 0;}
.ac-btn .btn-print{background-position: -73px 0;}

赞(0)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » display:inline-block元素间距问题
分享到: 更多 (0)