去除inline-block元素间间隙的几种方法

描述

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

span {
  position: inline-block;
  border: 1px solid red;
}

从上面代码和图中，我们会发现元素之间有间隔，主要有以下解决办法。

移除空格

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

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

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

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

使用margin负值

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

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

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

去掉闭合标签

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

注意：为了兼容IE6、IE7等，最后一个列表的标签的闭合标签要留着。

font-size:0;

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

div {
  font-size: 0;
}
span {
  position: inline-block;
  border: 1px solid red;
  font-size: 16px;
}

letter-spacing

div {
  letter-spacing: -5px;
}
span {
  position: inline-block;
  border: 1px solid red;
  letter-spacing: 0;
}

word-spacing

div {
  word-spacing: -5px;
}
span {
  position: inline-block;
  border: 1px solid red;
  word-spacing: 0;
}

利用浮动

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

需要给父元素添加clearfix类。

div {
  border: 1px solid red;
}
span {
  border: 1px solid blue;
  float: left;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}