HTML行内元素间隙问题起因 在我编辑的时候 为了保持一个程序员强迫症的习惯————就是换行 我把两个span标签换行输

起因

在我编辑的时候

为了保持一个程序员强迫症的习惯————就是换行

我把两个span标签换行输入

就是这样

<span>这是第一个span标签</span>
<span>这是折行输入的span</span>

然后它显示出来就是这样

那么我就想有无办法解决它

其实就是换行被解析成一个空格了，你输入文字换行也会这样

<span>我没有
      头发</span>
<span>但有一个性感的臀型</span>

你看，头发左边右边那里有缝隙，但是我性感的臀型那里没有

我已知的解决办法

给父元素设置font-size:0px，再给span设置字体

* {
      margin: 0;
      padding: 0;
    }

    span {
      background-color: rgb(180, 178, 178);
      color: white;
      font-size: 16px;
    }

    .father {
      font-size: 0;
    }

  <div class="father">
    <span>我没有
      头发</span>
    <span>但有一个性感的臀型</span>
  </div>

让行内块元素设置浮动float

    * {
      margin: 0;
      padding: 0;
    }

    span {
      float: left;
      background-color: rgb(180, 178, 178);
      color: white;
    }

缺点：浮动可能带来的其他问题

给父元素加上display: flex

* {
      margin: 0;
      padding: 0;
    }

    span {
      background-color: rgb(180, 178, 178);
      color: white;
    }

    .father {
      display: flex;
    }

word-spacing的负值

 * {
      margin: 0;
      padding: 0;
    }

    span {
      background-color: rgb(180, 178, 178);
      color: white;
    }

    .father span:last-child {
      background-color: #000;
    }

    .father {
      word-spacing: -4px;
    }

这个比较邪门，不同浏览器效果不同。 光是谷歌和火狐都显示不同

通过margin负数

 * {
      margin: 0;
      padding: 0;
    }

    span {
      background-color: rgb(180, 178, 178);
      color: white;
    }

    .father span:last-child {
      margin-left: -4px;
      background-color: #000;
    }

治标不治本

总结

1. 给父元素设置font-size:0px，再给span设置字体

   • （推荐）

2. 让行内块元素设置浮动float

   • （还行，但浮动可能带来的其他问题）

3. 给父元素加上display: flex

   • （和第2点一样本质其实是将元素的类型进行了改变，不再是行内元素了）

4. word-spacing的负值

   • （邪教）

5. 通过margin负数

   • （不太行）