html - 是什么导致网格边框和网格内容之间的间距变窄，我该如何密封它？

Question

我似乎无法让我的 CSS 网格在我的所有网格元素周围都有一个齐平的边框。有一条非常细的白线将黑色网格边框与网格内容的顶部和左侧边缘分开。它似乎也只发生在某些边缘上，这很烦人，请注意底部边缘不是问题。

我能做些什么来强制它是密闭的？通过这样一个简单的示例仍然产生此问题，我怀疑它可能是由屏幕分辨率差异引起的，因此作为参考，我在 Microsoft Surface Laptop 3 上并在 Chrome 中运行代码。

html,
body {
  margin: 0;
  padding: 0;
}

#wrapper {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
  border: 5px black solid;
  padding: 0;
  margin: 0;
}

.grid-item {
  background-color: red;
  padding: 0;
  margin: 0;
}

<div id="wrapper">
  <div id="box1" class="grid-item">Box 1</div>
  <div id="box1" class="grid-item">Box 2</div>
  <div id="box1" class="grid-item">Box 3</div>
  <div id="box1" class="grid-item">Box 4</div>
</div>

（为了明确起见，填充和边距设置为 0）

标签： htmlcsscss-grid

Answer 1

This seems to be working. 

*{
  margin: 0;
  padding: 0;
}

#wrapper {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
  border: 4px black solid;
}

.grid-item {
  background-color: red;
  margin:-1px;
}

<div id="wrapper">
  <div id="box1" class="grid-item">Box 1</div>
  <div id="box2" class="grid-item">Box 2</div>
  <div id="box3" class="grid-item">Box 3</div>
  <div id="box4" class="grid-item">Box 4</div>
</div>