[分享]css去除span之间的间隔

在CSS中，如果我们使用了标签来包裹文本，会发现标签之间会有一些间隔。这是因为浏览器会自动给标签添加默认的间隔。如果我们想要去除这些间隔，可以使用以下三种方法：使用标签的display属性使用字体大小...

在CSS中，如果我们使用了标签来包裹文本，会发现标签之间会有一些间隔。这是因为浏览器会自动给标签添加默认的间隔。

如果我们想要去除这些间隔，可以使用以下三种方法：

1. 使用标签的display属性

2. 使用字体大小为0

3. 使用CSS伪元素

  /* 方法一 */
  span {
    display: inline-block;
    margin-right: -4px;
  }
  
  /* 方法二 */
  span {
    font-size: 0;
  }
  span::after {
    content: " ";
    font-size: 16px;
  }
  
  /* 方法三 */
  span {
    position: relative;
  }
  span::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 4px;
    background-color: white;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
  }
  span::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 4px;
    background-color: white;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
  } 

以上三种方法都可以去除标签之间的间隔，具体使用哪一种方法可以根据自己的需求进行选择。