css 如何清除a标签的默认间距？

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

demo：默认情况

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

View Code

运行效果：

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

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

方法一：font-size:0

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

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

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

运行效果：

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

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

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

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

运行效果：

方法三：float浮动

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

 1 /*float(浮动)*/
 2 .demo2{
 3     display: -webkit-box;
 4     display: -webkit-flex;
 5     display: flex;
 6     justify-content: center;
 7 }
 8 .demo2 a{
 9     float: left;
10 }

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

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

运行结果：

在线演示DEMO：

http://codepen.io/kevinInsight/pen/wgLqXO

博主地址：http://www.cnblogs.com/kevinCoder/p/6418605.html

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

posted @ 2017-02-21 16:37 三高娘子阅读(340) 评论(0) 收藏举报

三高娘子

css 如何清除a标签的默认间距？

公告