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

demo:默认情况

<!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>

运行效果：

　

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

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

方法一：font-size:0

	<div class="demo demo1">

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

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

	</div>

　　

		.demo1{

			font-size: 0;

		}

		.demo1 a{

			font-size: 14px;/*这里一定要设置，不然文本内容将不显示*/

		}

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

运行效果：

　　

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

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

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

	<div class="demo">

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

	</div>

运行效果：

方法三：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样式只是为了案例显示效果，非必需。

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

运行结果：

方法四：letter-spacing

	<div class="demo demo3">

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

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

	</div>

　　

		/*letter-spacing*/

		.demo3{

			letter-spacing: -999px;

		}

		.demo3 a{

			letter-spacing: 0;

		}

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

运行结果：

在线演示DEMO：

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

 

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

  1. css怎样去掉多个Img标签之间的间隙

    在写css的时候经常会遇到这样的情况,两张宽度加起来是2n的图片,在宽度为2n的容器中放不下,这是因为两张图片之间有一段间隙的缘故,产生这种现象的原因是浏览器把两个img标签之间的空格当成了空白节点. ...

  2. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

  3. css 图片有间隔多个Img标签之间的间隙

    今天写css时发现,图片加起来刚好是900px的三张图片,不能在一个900px宽容器放下,因为图片之间有间隔,我猜是浏览器把两个img标签之间的空格当成了空白节点. 在网上找到了几个不错的解决方法: ...

  4. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

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

    img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:    ...

  6. HTML|CSS之HTML常用标签

    知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...

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

    typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...

  8. css 框架——base.css，作用是重设浏览器默认样式和提供通用原子类。自己留存

    今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能 ...

  9. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

随机推荐

  1. ui-router 留存

    学习 ui-router - 路由控制 022014年01月 参考原文:https://github.com/angular-ui/ui-router/wiki/URL-Routing 在你的应用中大 ...

  2. spring+mybatis之注解式事务管理初识(小实例)

    1.上一章,我们谈到了spring+mybatis声明式事务管理,我们在文章末尾提到,在实际项目中,用得更多的是注解式事务管理,这一章将学习一下注解式事务管理的有关知识.注解式事务管理只需要在上一节的 ...

  3. Makefile 自动搜索 c 和 cpp 文件, 并生成 .a 静态库文件

    最近 又弄linux 下的 .a 静态库编译, 于是想 做个 一劳永逸的Makefile, 经过一番折腾, 最后成功了 只需要 改两个 参数 就可以执行了(MYLIB 和 VPATH), 代码 如下: ...

  4. [hdu4347]The Closest M Points(线段树形式kd-tree)

    解题关键:kdtree模板题,距离某点最近的m个点. #include<cstdio> #include<cstring> #include<algorithm> ...

  5. vue和bootstrap的select控件貌似有冲突？

    貌似vue和bootstrap的select控件会冲突,因为bootstrap的select控件会将option替换为<a>标签,这样就会导致vue渲染失败.(这个问题让我整了一个上午,最 ...

  6. linux 安装天气插件

    1. 用命令 sudo apt install gnome-shell-extension-weather 安装插件 但是在那之前你安装了 GNOME Shell Extensions 如果没有安装 ...

  7. iOS 导航栏黑线，UIImage 枚举处理方式

      ios 找出导航栏下面的黑线(可隐藏,改变样式等) http://www.jianshu.com/p/effa4a48f1e3     设置UIImage的渲染模式:UIImage.renderi ...

  8. 五分钟带你入门TensorFlow

    TensorFlow是Google开源的一款人工智能学习系统.为什么叫这个名字呢?Tensor的意思是张量,代表N维数组:Flow的意思是流,代表基于数据流图的计算.把N维数字从流图的一端流动到另一端 ...

  9. SpringBoot Actuator & SpringBoot Admin

    SpringBoot Actuator提供了很多监控和管理你的spring boot应用的HTTP或者JMX端点,并且你可以有选择地开启和关闭部分功能. 当你的spring boot应用中引入依赖之后 ...

  10. 79. Word Search在字母矩阵中查找单词

    ［抄题］: Given a 2D board and a word, find if the word exists in the grid. The word can be constructed ...