元素和元素之间间隙的产生和解决方法在编写网页的时候，为了增加代码的可读性和可维护性，时常会在代码中添加上对应的空格和换行

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情

我正在参加码上掘金体验活动，详情：show出你的创意代码块

我们在编写网页的时候，为了增加代码的可读性和可维护性，我们时常会在代码的适当位置添加上对应的空格和换行

而这些空格和换行经过浏览器的解析后，会被识别为空格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
    }
  </style>
</head>
<body>
  <!--
     因为换行符被解析成为了空格
     所以在span.item之间会存在一个空格
  -->
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</body>
</html>

掘金代码片段

这些由于空格所导致的元素和元素之间的间隙被称之为元素之间的间距，而这些间距往往不是我们所需要的，更多的时候我们为了更方便的对网页进行布局或者更好的进行页面的兼容性处理，我们时常会希望可以移除这些间距，

移除空格和换行

既然元素间之间的间距出现的原因就是标签段之间的空格和换行，因此，去掉HTML中的空格，自然间距就没有了。

但是这种方式会极大程度的减低代码的可读性和可维护性，

所以不推荐在生产环境中使用这种方式来清除元素和元素之间的间距

我们可以在生产环境的时候，使用这样方式来清除间距（很多类似于vite，webpack之类的打包工具，在打包生产环境代码的时候，会自动移除不必要的空格和换行）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
    }
  </style>
</head>
<body>
  <!-- 这种方式适合生产环境，不适合开发环境 -->
  <span>item1</span><span>item2</span><span>item3</span>
</body>
</html>

使用margin负值

margin为正值的时候，元素会往右移动，而设置为负值的时候，元素会往左进行移动

我们可以使用这种方式来清除元素和元素之间的间距

但是这种方式我们需要根据实际情况去设置margin的值，不够通用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
    }

    body :not(span:nth-child(1)) {
      margin-left: -5px;
    }
  </style>
</head>
<body>
  <!-- 使用margin负值来清除元素和元素之间的间距 -->
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</body>
</html>

掘金代码片段

font-size: 0

对于行内级或行内块级元素，元素于元素之间的间隙的大小约是1个字符的大小

所以可以通过设置父元素的font-size属性的值为0，来将这个字符的大小变为0，从而移除元素和元素之间的间隙

但是因为font-size是一个继承属性，所以我们需要多次在子元素中对字体大小进行重置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /* 通过在父元素设置font-size的值为0来清除间距 */
      font-size: 0;
    }

    span {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
      /* 因为font-size是继承属性，所以需要在子元素进行重置 */
      font-size: 16px;
    }
  </style>
</head>
<body>
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</body>
</html>

掘金代码片段

word-spacing

我们可以使用word-spacing来设置单词和单词之间的间距

使用这种方式我们依旧需要自己去调整word-spacing的值，不够通用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /* 通过设置父元素的word-spacing来调整子元素之间的间距 */
      word-spacing: -5px;
    }

    span {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
    }
  </style>
</head>
<body>
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</body>
</html>

掘金代码片段

letter-spacing

letter-spacing用来设置字符和字符之间的间距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      /* 在父元素中，将字符间距减少, 从而使单词字符之间的间距变得紧凑 */
      letter-spacing: -5px;
    }

    span {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
      /*
        在子元素中，需要将字符之间的间距进行重置
        如果不重置，因为letter-spacing是一个文本相关的继承属性
        所以此时单词之间的字符会挤在一起, 因此需要进行重置
      */
      letter-spacing: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
  </div>
</body>
</html>

掘金代码片段

float

因为浮动元素之间不能层叠，所以浮动元素具有如下特点:

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
      /* 利用浮动元素的特性来清除元素之间的间距 */
      float: left;
    }
  </style>
</head>
<body>
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</body>
</html>

掘金代码片段

flex

我们可以使用flex布局的 justify-content: flex-start;来清除元素和元素之间的间距

而开启flex布局后，justify-content的默认值就是flex-start，所以这行代码一般可以省略

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
    }

    span {
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
  </div>
</body>
</html>

掘金代码片段