CSS：如何清除a标签之间的默认留白间距

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

demo:默认情况

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<! DOCTYPE  html> < html  lang="en"> < 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  class="demo">          < a  href="#">底部链接1</ a >          < a  href="#">底部链接2</ a >      </ div > </ body > </ html >

 

运行效果：

　

 

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

发现了如下四种清除这种间距的方法：

 

方法一：font-size:0

1 2 3 4

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

　　

1 2 3 4 5 6

.demo 1 {      font-size :  0 ; } .demo 1  a{      font-size :  14px ; /*这里一定要设置，不然文本内容将不显示*/ }

 

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

 

 

运行效果：

　　

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

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

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

 

1 2 3

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

 

运行效果：

 

 

方法三：float浮动

1 2 3 4

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

　　

1 2 3 4 5 6 7 8 9 10

/*float(浮动)*/ .demo 2 {      display : -webkit-box;      display : -webkit-flex;      display : flex;      justify- content :  center ; } .demo 2  a{      float :  left ; }

 

*注：　.demo2样式只是为了案例显示效果，非必需。

我们可以从多出来的代码就可以看到，这种方法会对原来的布局造成影响，所以，如果要采用这种方法，要考虑到对布局的影响。

 

运行结果：

 

 

方法四：letter-spacing

 

1 2 3 4

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

　　

1 2 3 4 5 6 7

/*letter-spacing*/ .demo 3 {      letter-spacing :  -999px ; } .demo 3  a{      letter-spacing :  0 ; }

 

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

运行结果：