一、前言

平时在实现ui的设计稿的时候会遇见一些小问题，比如莫名其妙的间距，明明没有加margin和padding，但是就是会出现间距，这就是两个span标签的间距问题。我们今天就这个问题进行分析。

二、现象描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><span>hello</span><span>world</span><span>helloworld</span>
</body>
</html>

我们看这样一段代码，他展示出来的效果是这样的

可以看到，我们的span上没有应用任何样式，但是仍然出现了间距。
又或者是下面这段代码;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.inline-block {display: inline-block;width: 100px;height: 100px;border: 1px solid black;}</style>
</head>
<body><div class="inline-block"></div><div class="inline-block"></div>
</body>
</html>

他的效果是这样的:

我们也可以很明显的看到，两个div直接出现了间隙。那么，这个间隙到底是怎么出现的呢？

三、原因

导致这个现象出现的原因很简单，我们知道多个空格或者回车浏览器都会解析成空格，其实，我们span与span之间敲的回车，就被解析成了空格。所以，那一点间隙，其实就是这个空格，如果不理解，看下面这段代码就能理解了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><span>hello world</span><br><span>helloworld</span><br><span>hello</span><span>world</span>
</body>
</html>

他的效果是这样的；

怎么样，是不是一模一样，这下你能理解为什么我们没有加margin和padding，没有添加任何样式，他们之间也存在间距了吧？

四、解决方案

既然知道了原因，那这个问题就很好解决了。

代码中不要写空格:
既然这个问题是空格导致的，那我们不要空格或者回车，这个问题就解决了
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>helloworld helloworld
</body>
</html>
```
像上面这种写法，展现出来的效果就是：

这样两个单词之间的间距就没有啦，不过这种写法会导致我们的代码不整洁，对于有强迫症的小伙伴来说是接受不了的，我们可以用其他的方法来解决这个问题。
通过css去消除间距
既然它出现了间距，那我们啥也不管，把它弄掉就行了，我们可以用样式把间距去掉，比如用margin/word-spacing/letter-spacing等：
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body=>helloworld<div style="word-spacing: -40px;">helloworld</div>
</body>
</html>
```
效果是下面这样的：

可以看到这样也能消除间距，但是如果使用margin，不能保证在任何情况下两个单词都恰好没有间距。而自己在chrome中测试发现，word-spacing的负值足够大的情况下，不会将两个单词重叠，只会紧紧贴住。所以设置一个负值较大的word-spacing看起来是一个比较好的方法，但是不清楚在其他浏览器中是否和chrome保持一致。

通过设置font-size消除间距
这种方法是我平时喜欢用的，既然空格占了位置，那么我们把font-size设置为0，空格就不会占位置了，同时再单独设置子元素的字体大小，就能干掉这个间隙了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="font-size: 0;"><span style="font-size: 20px;">hello</span><span style="font-size: 20px">world</span></div>
</body>
</html>

他的效果是这样的：

五、结语

总的来说，肯定有很多方法可以去掉这个空隙，但是最普遍的集中方法就是这几种了。同时，只要我们知道了这个空隙为何而来，我们就能对症下药，找到解决问题的办法。

span标签的间距问题相关推荐

两个span标签(或i标签)之间有间隙的问题
有三个i标签,中间一个放文字,前后两个放的是iconfont 效果图如下: 会发现三个i标签渲染出来之后中间会有挺大的空隙: 尝试设置边距为0无果: 解决方法: 方法一:(不推荐) 去掉三个i标签前后 ...
行内标签（最常用的：a标签、img标签、span标签）
a 标签: 功能: 从一个页面跳转到其他页面,或者是当前页面的其他位置. 属性: href :指定跳转的目标路径. 值可以是一个外部网站的地址: 也可以是一个内部网页的地址 target: _self ...
使用span标签为文字设置单独样式
这一小节讲解标签,我们对..这三个标签进行一下总结: 1. 和<strong& ...
html语言中span,html元素span标签的使用方法及作用
html元素标签是一个没有任何语义的行内元素,不对设置任何样式,则不会有任何视觉效果.有关该标签的使用方法及作用详解如下: 标签的定义标签属于行内元素,无任何特殊语义. 标签主要用于定义文本样式, ...
JQ和Js获取span标签的内容
转自:https://www.cnblogs.com/anniey/p/6439021.html html: 1 '我是span标 ...
php html class,如何使用HTML span标签的class属性？这里有关于class属性的详解
本篇文章主要为大家讲述的就是关于HTML span标签的class属性的一些用法,这个是需要配合css样式一起来使用的,现在可以稍微说点css样式的基本,对有过基础的人来说都很容易.那现在就让我们一起 ...
html5无意义标签,无意义的div和span标签
HTML 元素是块级元素,它是可用于组合其他 HTML 元素的容器. 元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行. 如果与 CSS 一同使用, 元素可用于对大的内容块设 ...
圆点html span,HTML span 标签
定义和用法: 标签被用来组合文档中的行内元素.在行内定义一个区域,也就是一行内可以被划分成好几个区域,从而实现某种特定效果.本身没有任何属性. 在IE6下,span元素浮动时一定要把span元素放在a ...
html:(8):span标签和q标签
使用标签为文字设置单独样式这一小节讲解标签,我们对..这三个标签进行一下总结: ...
js正则表达式匹配span标签
1.js正则表达式匹配span标签 const spans = htmlStr.match(/(.*?)<\/span>/g) 2.js正则表达式–获取 ...

span标签的间距问题