现象描述

假定有如下代码：

1
2
3
4
5
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
1
2
3
4
span {
  position: inline-block;
  border: 1px solid red;
}

看图我们会发现，当设置 position: inline-block; 后，数字之间都有空隙，下面我们就来简述几种去掉这个间隙的方法。


移除空格

元素之间留间距出现的原因是因为标签与标签之间的空格，我们可以把标签之间的空格去掉，那自然就没有间隙了。

有如下三种方式：

  1. 删除标签之间的空格，让标签排列一行。

    1
    2
    3
    <div>
      <span>1</span><span>2</span><span>3</span>
    </div>

  2. 把闭合标签的 > 放到下一行头部。

    1
    2
    3
    4
    5
    <div>
      <span>1</span
      ><span>2</span
      ><span>3</span>
    </div>

  3. 在闭合标签与下一行开始标签之间添加注释。

    1
    2
    3
    4
    5
    <div>
      <span>1</span><!--
      --><span>2</span><!--
      --><span>3</span>
    </div>

去除闭合标签

把闭合标签删除掉可以解决。

1
2
3
4
5
<div>
  <span>1
  <span>2
  <span>3</span>
</div>

注意：为了兼容 IE6/7 等，最后一个列表标签的闭合标签不能删除。


margin负值

可以通过设置 margin 为负值，让元素偏移几像素去掉间隙。

1
2
3
4
5
span {
  border: 1px solid red;
  position: inline-block;
  margin-right: -5px;
}

注意：margin 负值的大小与上下文的字体和文字大小相关。


设置字体大小为0

我们可以给父元素设置 font-size: 0;，给子元素设置字体大小。

1
2
3
4
5
6
7
8
div {
  font-size: 0;
}
span {
  border: 1px solid red;
  position: inline-block;
  font-size: 20px;
}

letter-spacing

letter-spacing 用于设置文本字符的间距表现。

1
2
3
4
5
6
7
8
div {
  letter-spacing: -5px;
}
span {
  position: inline-block;
  border: 1px solid red;
  letter-spacing: 0;
}

word-spacing

word-spacing 用于声明标签和单词直接的间距行为。

1
2
3
4
5
6
7
8
div {
  word-spacing: -5px;
}
span {
  position: inline-block;
  border: 1px solid red;
  word-spacing: 0;
}

浮动

利用浮动清除间隙。（会引起浮动问题，注意需要清除浮动）

1
2
3
4
5
<div class="clearfix">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
div {
  border: 1px solid red;
}
span {
  border: 1px solid blue;
  position: inline-block;
  float: left;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}