为什么div周围有空格

Question

在td中，我有四个div。但是我不知道像创建空间一样会有一点边距。而且我似乎无法删除它。

如果这是inline-block的行为，那么如何覆盖此行为？

.box{
  width: 25%;
  height: 50px;
  background-color: red;
  display: inline-block;
}

<table style='width: 100%;'>
  <tr>
    <td>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
    </td>
  </tr>
</table>

Answer 1

因为divs之间有空格（换行符和空格）。 ;）

.box {
  width: 25%;
  height: 50px;
  background-color: red;
  display: inline-block;
}

td {
  font-size: 0;
}

<table style='width: 100%;'>
  <tr>
    <td>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
    </td>
  </tr>
</table>

Answer 2

您可以使用向左浮动而不是显示行内块，我认为这是最好，最简单的应用方法

.box{
  width: 25%;
  height: 50px;
  background-color: red;
  float:left;
}

<table style='width: 100%;'>
  <tr>
    <td>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
      <div class='box'></div>
    </td>
  </tr>
</table>