CSS网格左侧和右侧未使用的空间

我正在尝试创建CSS网格组件，但有一个问题不断出现，对于我来说，我找不到任何解决方案

举个基本的例子：

.grid{
显示：网格；
网格间距：1px；
背景：黑色；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr；
}
.项目{
背景：白色；
}

A.
B
C
A.
B
C
A.
B
C

正文{margin:0；}

适合我

正文{
保证金：0；
}
.电网{
显示：网格；
网格间距：1px；
背景：黑色；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr；
}
.项目{
背景：白色；
}

A.
B
C
A.
B
C
A.
B
C

好吧，我想出来了。因此，我不确定这是一个bug还是我遗漏了什么，但解决方案是将网格包装到一个包装器中，如：

<style>
.grid-container {
    border:1px solid red;
}

.grid {
    display: grid;
    grid-gap: 1px;
    background: black;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    border:1px solid green;
}

.item {
    background: white;
}
</style>
<div class="grid-container">
    <div class="grid">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>

.网格容器{
边框：1px纯红；
}
.电网{
显示：网格；
网格间距：1px；
背景：黑色；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr；
边框：1px纯绿色；
}
.项目{
背景：白色；
}
A.
B
C
A.
B
C
A.
B
C

包装器（红色边框）占用了可用空间，但网格随后会正确匹配，如果没有包装器，网格将像包装器一样展开，但其行为就像在包装器内部一样

正如我在一篇评论中提到的，Blazor服务器端项目中的razor组件就是如此。不确定这是否是我、项目或技术独有的问题

附言

---

包装器不需要CSS类或样式，它可以是一个简单的标记。

您尝试过这个吗<代码>正文{margin:0}是的，这并不能解决问题。它将边距设置在黑色边框的外侧，问题是边距不是从边框的内侧开始，而是留下一点固定的空间。在顶部和底部都没问题。我正试图在Blazor服务器端应用程序的Razor组件上使用它。如我在评论中所说，这并不能解决我的问题。在opera和firefox上试用。但问题依然存在，我很抱歉。我只有你给我们的工作。您是否正在检查开发控制台中的

div

，以查看对其应用了什么css？没问题，但是给出了所有必需的信息。正如我所说的，问题很简单，无论我在什么元素上放置什么样的边距或填充，这个差距都会持续存在。我将尝试在开发控制台中检查它（忘记了它，但我不太希望答案就在那里）