容器 div 上不可移除的 1px 填充答案

【问题标题】：Unremovable 1px padding on container div容器 div 上不可移除的 1px 填充
【发布时间】：2022-02-17 22:26:10
【问题描述】：

我正在尝试使用 flexbox 平铺具有跨度的 div，但是我这样做了 - 我似乎总是在容器 div 上有一个 1px 的顶部和左侧填充，我不知道是什么原因造成的。

由于某种原因，它有这个差距：

div, span {
      box-sizing: border-box;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    div {
      width: 162px;
      height: 162px;
      display: flex;
      flex-wrap: wrap;
      border: 1px solid gray;
    }
    
    span {
      width: 40px;
      height: 40px;
      display: block;
      border: 1px solid gray;
    }

<div>
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>D</span>
  <span>E</span>
  <span>F</span>
  <span>H</span>
  <span>I</span>
  <span>J</span>
  <span>K</span>
  <span>L</span>
  <span>M</span>
  <span>N</span>
  <span>O</span>
  <span>P</span>
  <span>Q</span>
</div>

【问题讨论】：

我没有看到我的末端。
1px 边框占用了一些空间。当我们移除边框并将 div 宽度设为 160px 时，额外的间距消失了（跨度完全适合 flex div）。即使在制作box-sizing: border-box 之后，我也不知道它为什么会这样。 flex 可能有些不一致。

标签： html css flexbox

【解决方案1】：

将所有 span 标签包装在一个容器中，并在其中使用 scale。这可能不是最好的解决方案，但确实有效。

.container {
  display: flex;
  flex-wrap: wrap;
  transform: scale(1.01);
}

<div>
  <div class="container">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>H</span>
    <span>I</span>
    <span>J</span>
  </div>
</div>

【讨论】：

感谢您的建议，但很难相信这么简单的事情应该需要转换黑客:(

【解决方案2】：

在这种情况下你可以使用表格。

table {
  width: 162px;
  height: 162px;
  border: 1px solid gray;
  border-collapse:collapse;
}

td {
  width: 40px;
  height: 40px;
  border: 1px solid gray;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>H</td>
    <td>I</td>
  </tr>
  <tr>
    <td>J</td>
    <td>K</td>
    <td>L</td>
    <td>M</td>
  </tr>
  <tr>
    <td>N</td>
    <td>O</td>
    <td>P</td>
    <td>Q</td>
  </tr>
</table>

【讨论】：

不要将表格用于目的布局！
@Sfili_81 是的，网格也是一种选择。