为什么有一个 CSS Top 偏移量，我如何删除/说明它？

如何解决为什么有一个 CSS Top 偏移量，我如何删除/说明它？

我正在学习 JS、HTML 和 CSS，并使用 JS、HTML 和 CSS 制作一个非常基本的贪吃蛇游戏。当我有多个对象时，我得到了一个奇怪的 CSS top 偏移量。

例如：我使用的 HTML 看起来像：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="grid" id="grid">
        <div class="snake" id="snake"></div>
        <div class="dot" id="dot"></div>
    </div>
<!--    <script src="app.js"></script>-->
</body>
</html>

使用 CSS 样式：

.grid {
    width: 1000px;
    height: 1000px;
    border: 1px solid brown;
    margin: auto;
}

.snake {
    width: 20px;
    height: 20px;
    background-color: green;
    background-size: 20px 20px;
    position: relative;
    top: 200px;
    left: 200px;
}

.dot {
    width: 20px;
    height: 20px;
    background-color: blue;
    background-size: 20px 20px;
    position: relative;
    top: 200px;
    left: 200px;
}

这导致了这个输出： Output display using Chrome

可以看出，尽管它们在 CSS 中具有相同的 top 和 left 值，但它们是顶部偏移量。为什么会这样，我如何让它们重叠？

感谢您抽出宝贵时间。