即使我们使用了类似 *{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. avalon1.3的新特性预览

    avalon1.2的性能优化风暴很快就告一段落,入职也快一个月了,许多乱七八糟的事也少了下来,估计未来一个月会有许多好东呈现给大家. 首先是一个性能检测工具.由于MVVM是将原本由人脑干的事,转到各种 ...

  2. pom----Maven内置属性及使用

    Maven共有6类属性: 内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project. ...

  3. Python与Go冒泡排序

    #!/usr/bin/env python # -*- coding: utf-8 -*- # 冒泡排序法 def bubbling(array): # 时间复杂度:O(n^2) for i in r ...

  4. VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发

  5. cdoj1091-秋实大哥の恋爱物语 【kmp】

    http://acm.uestc.edu.cn/#/problem/show/1091 秋实大哥の恋爱物语 Time Limit: 5000/2000MS (Java/Others)     Memo ...

  6. Python爬虫实战三之实现山东大学无线网络掉线自动重连

    综述 最近山大软件园校区QLSC_STU无线网掉线掉的厉害,连上之后平均十分钟左右掉线一次,很是让人心烦,还能不能愉快地上自习了?能忍吗?反正我是不能忍了,嗯,自己动手,丰衣足食!写个程序解决掉它! ...

  7. spring加载ApplicationContext.xml的四种方式

    spring 中加载xml配置文件的方式,好像有4种, xml是最常见的spring 应用系统配置源.Spring中的几种容器都支持使用xml装配bean,包括: XmlBeanFactory , C ...

  8. python 中面向对象编程简单总结1

    1.类的定义方式 class ClassName(object): #object 表示继承的类,默认为object pass 类的使用类似函数的调用,也可以认为是调用了一次模板来创建一个实例. 2. ...

  9. PreparedStatement的setDate方法如何设置日期

    pstmt.setString(12, "to_char(sysdate,'YYYY-MM-DD HH24:MI:SS')");这样写不对,应该如何写 该方法用于将指定的参数设置为 ...

  10. 大前端涉猎之前后端交互总结1: 软件架构与PHP搭建

    1 软件架构与PHP搭建 1.1 HTTP服务器(web服务器) 即( web服务器 )网站服务器,主要提供文档(文本.图片.视频.音频)web浏览服务,一般安装Apache.Nginx服务器软件. ...