html 行内元素引起的空白间距问题

这篇文章发表于 2022年04月29日,星期五,08:33

是由于空格、换行引起的

 <div class="container">
        <span class="item">131313131313131</span>
        <span class="item">131313131313131</span>
        <!-- <div class="subfix"></div> -->
      </div>

两个span之间使用换行的话就回出现空格,那就换成如下的写法

      <div class="container">
        <span class="item">131313131313131</span><span class="item">131313131313131</span>
      </div>

这样就没问题了,但是为了代码的可读性,肯定不能这么写,所以可以使用如下方法

      .container {
          font-size: 0;
      }
      .item {
        font-size: 12px;
        background-color: gray;
      }

这只外层元素的font-size:0,内层元素重新设置字体即可消除。

其他方法:

      .container {
          letter-spacing: -3px;
      }
      .item {
        font-size: 12px;
        background-color: gray;
        letter-spacing: 0;
      }