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{}

        .demo a:last-child{}

    </style>

</head>

<body>

    <p>默认情况</p>

    <div class="demo">

        <a href="#">底部链接1</a>

        <a href="#">底部链接2</a>

    </div>

</body>

</html>

运行效果：

　

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

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

方法一：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

.demo1{

    font-size: 0;

}

.demo1 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(浮动)*/

.demo2{

    display: -webkit-box;

    display: -webkit-flex;

    display: flex;

    justify-content: center;

}

.demo2 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*/

.demo3{

    letter-spacing: -999px;

}

.demo3 a{

    letter-spacing: 0;

}

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

运行结果：

在线演示DEMO：

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

时间： 2024-10-08 11:28:34

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

如何清除a标签或者span标签之间的默认留白间距

即使使用 *{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式 类似<a>标签这种inline-block元素,它们之间还是存在着留白和间距. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <meta name="vie

去除行块级标签之间的默认间距

当两个行块级标签之间有空格,或者换行时,行块级标签之间会有一个默认4px的间距.去除方法如下: 给行块级标签的父级设置:font-size: 0: 在给相应的行块级标签设置需要的 font-size: 如下所示: <style> .parent{ font-size: 0; } .parent span{ display: inline-block; font-size: 14px; } </style> <div class="parent"> &

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

关于CSS样式清除浮动的总结

浮动的元素之间是互相贴靠的.但是在实际的工作中,我们是希望同组的元素互相贴靠的,但是不同组的元素之间是不互相贴靠的.第二组的元素不应该与第一组的元素有任何互相的影响. 比如,我们想要的效果是这样的: 但是如果浮动没有清除的话,就会变成这样: 清除浮动有四种方式,一般常选用后两种,根据不同的情况进行选择. 1)加高法: 浮动的元素,只能被有高的盒子关住.但是,工作上绝不会给所有的盒子都加高度,因为这样很麻烦,而且没法适应页面的快速变化. 2)clear:both 最简单的清除浮动的方法,就是给盒子

0009 CSS基础选择器（ 标签、类、id、通配符）

typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的一组 选择器的作用 ? 找到特定的HTML页面元素 一句话说出他们: ※※※※ CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来 必

css基础（css书写 背景设置 标签分类 css特性）

css书写位置 行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link rel="stylesheet " href="地址" type="text/css"/> 嵌入式写法 <style type="css/stylesheet"> p{ font-size:20px; color:red;

横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的 话,两个浏览器下会有区别,具体有一个会产生间隙.兼容做法就是都设置float属性.但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上.我通常把清除浮动写成单独的<div clas

使用css全面美化input标签

做网站时经常有这样那样的需要,要美化input ,于是CSS的美化必不可少.和程序人生的站长交流,他发给我这个. 下面是CSS样式 Js代码   input { border:1px solid #B3D6EF; background:#ffffff; } input { star : expression( onmouseover=function(){this.style.backgroundColor="#D5E9F6"}, onmouseout=function(){this.

谈CSS布局中HTML标签语义化

很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这里,我可以很负责的告诉大家,这不叫web标准,这叫“div+css”.名副其实的“div+css”.也许有人会说,我用“div+css”做出来的页面完全表达出设计图的意图,浏览器都兼容,没有任何问题.的确,你这样做出来的页面看起来是没任何问题,注意,这里说的是“看起来没任何问题”,仅此而已. 人是可