描述

<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;
}