5种方法快速去掉HTML中Inline-Block的空白

下面我将详细讲解五种方法快速去掉HTML中Inline-Block的空白的攻略。

前言

当我们在使用 Inline-Block 布局时，会发现元素之间会出现一些空白，这对我们的布局会产生一定的影响。那么接下来，我们将介绍5种方法来快速去掉这些空白。

方法一：使用负的字间距

我们可以通过给 Inline-Block 元素设置一个负的字间距来去掉元素之间的空白。具体的代码如下：

<style>
  .box {
    font-size: 0;
  }

  .box div {
    display: inline-block;
    background-color: black;
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .box div:last-child {
    margin-right: 0;
  }
</style>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
</div>

<script>
  var divs = document.querySelectorAll('.box div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.letterSpacing = '-4px';
  }
</script>

这里的关键在于给 .box 中的子元素设置一个负的字间距，这样就可以去掉它们之间的空白了。需要注意的是，我们在给 .box 设置字体大小时，要把它设置为 0 ，这是为了避免元素之间的空白太大。

方法二：将结束标记放在下一行

我们也可以直接把 Inline-Block 元素的结束标记放在下一行，这样也可以避免元素之间的空白。例如：

<style>
  .box div {
    display: inline-block;
    background-color: black;
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .box div:last-child {
    margin-right: 0;
  }
</style>

<div class="box">
  <div></div
  ><div></div
  ><div></div
></div>

这里的关键在于，在 Inline-Block 元素的结束标记和下一个元素的开始标记之间插入一个换行符和一个关闭尖括号，这样就可以避免元素之间的空白。

方法三：将父元素的字体大小设为0

我们还可以通过将父元素的字体大小设置为 0 来去掉元素之间的空白。例如：

<style>
  .box {
    font-size: 0;
  }

  .box div {
    display: inline-block;
    background-color: black;
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .box div:last-child {
    margin-right: 0;
  }
</style>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
</div>

这里的关键在于给 .box 元素设置字体大小为 0，这样它的子元素就会继承这个样式，从而去掉元素间的空白。

方法四：使用Flex布局

我们还可以使用 Flex 布局来去掉元素之间的空白，这样也比较简单。例如：

<style>
  .box {
    display: flex;
  }

  .box div {
    background-color: black;
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .box div:last-child {
    margin-right: 0;
  }
</style>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
</div>

这里的关键在于使用了 Flex 布局，它会自动把元素之间的空白去掉。

方法五：使用grid布局

最后，我们还可以使用 grid 布局来去掉元素之间的空白，这样也比较简单。例如：

<style>
  .box {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-gap: 10px;
  }

  .box div {
    background-color: black;
    width: 50px;
    height: 50px;
  }
</style>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
</div>

这里的关键在于使用了 grid 布局，它会自动把元素之间的空白去掉，而 grid-gap 属性控制元素之间的间隔。