设置display:inline-block 元素间隙

上代码:

<div class="page">
    <a href="" class="num">共1231条</a>
    <a href="" class="">首页</a>
    <a href="" >1</a>
    <a href="" >2</a>
    <a href="" >3</a>
    <a href="" >4</a>
    <a href="" class="">末页</a>
</div>
.pgae a{
　　display: inline-block;padding: 9px 15px;height: 40px;border: 1px solid #979797;color: #333font-size: 16px;line-height: 22px;}

a标签之间 有间隙 是因为 页面 中有空格的问题 

自己最常用的方法是 给 .page 设置font-size:0 或者直接 把display换成float当然还有很多方法 

1.可以改变格式将a标签间距去掉:<a href="" >3</a><a href="" >4</a> ,但是如果是php或者别的方法循环出来的数据就比较难实现了。

2.可以发现中间的间隙其实也是字体(font-size:0会奏效),所以可使用letter-spacing:-X(不同浏览器值可能不同),还是给父容器(.page)设置然后再给a标签恢复。

......

转载于:https://www.cnblogs.com/aloneCode/p/6745432.html