淘先锋技术网

首页 1 2 3 4 5 6 7

CSS 怎么清除多个a标签之间的默认空白空隙/间距？_CSS

今天来分享下如何清除掉多个a标签之间的默认空白空隙。关于清除各种默认空隙，之前发布过2篇，分别是：

1、《两个input input与button之间有空隙清除》

2、《《:last-child》清除列表中最后的空隙》

关于a标签的空隙，在今天实际使用中发现之前竟然从未想过，也基本不会用到，各种a标签肯定要使用margin进行间距设置而不是默认的堆放再一起。

但刚才在写一个页码的时候，要使多个a链接页码保持紧贴，竟然发现有很大的空隙！

先看要实现的效果：

a标签空隙间隙1.png

而实际使用a进行默认的效果：

a标签空隙间隙.png

可以很明显的看出a标签默认状态下存在一定的间隙，即使我们使用了类似*{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式,也会发现类似<a>标签这种inline-block元素，它们之间也还存在着间距。

那么如何解决a标签的空白间隙呢？

看案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>怎么去除a标签的默认间距</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .demo{padding: 14px;text-align: center;}
        .demo p{margin-bottom: 6px;}
        .demo a{padding:3px 5px; text-decoration: none;color: #ffffff;}
        .demo a:first-child{background-color: #2eacff;}
        .demo a:last-child{background-color: orange;}
    </style>
</head>
<body>
    <p>默认情况</p>
    <div>
        <a href="#">底部链接1</a>
        <a href="#">底部链接2</a>
    </div>
</body>
</html>

 运行效果：

a空隙.png

我们会发现默认间距的存在，这种间距也被成为元素间留白间距。

之前也曾遇到过，但是没太注意，最近因为和同事整理公司的UI框架，遇到类似的情况比较多，所以，查找了相关资料以及实践验证之后，发现了如下四种清除这种间距的方法：

方法一：font-size:0  清除多a标签之间空隙

<div class="demo demo1">
    <a href="#">底部链接1</a>
    <a href="#">底部链接2</a>
</div>
.demo1{
    font-size: 0;
}
.demo1 a{
    font-size: 14px;/*这里一定要设置，不然文本内容将不显示*/
}

a标签空隙间隙方法1效果.png

这种方法，也是微信UI框架weui采用的方法，推荐使用。

a标签空隙间隙方法1.png

方法二：a标签内容写在一行

因为这种间距是由于元素留白引起的，所以，当我们把代码写在同一行的时候，间距也可消除。

但是考虑到代码的可读性，这种方法建议谨慎使用！

<div class="demo">
    <a href="#">底部链接1</a><a href="#">底部链接2</a>
</div>

 a标签空隙间隙方法2效果.png

方法三：float浮动

<div class="demo demo2">
    <a href="#">底部链接1</a>
    <a href="#">底部链接2</a>
</div>
/*float(浮动)*/
.demo2{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}
.demo2 a{
    float: left;
}

 *注： .demo2样式只是为了案例显示效果，非必需。 我们可以从多出来的代码就可以看到，这种方法会对原来的布局造成影响，所以，如果要采用这种方法，要考虑到对布局的影响。

a标签空隙间隙方法3效果.png


方法四：letter-spacing

<div class="demo demo3">
    <a href="#">底部链接1</a>
    <a href="#">底部链接2</a>
</div>
.demo3{
    letter-spacing: -999px;
}
.demo3 a{
    letter-spacing: 0;
}

注：该方法兼容性良好可以使用。

a标签空隙间隙方法4效果.png

以上4种方法都可以去除多个a标签之间存在的默认间隙间距，兼容性最好按1234这样的顺序来。