如何移除CSS Grid布局设置gap:0后残留的网格间隙与内边距？

问题表现 #

预期实现左右无间隙两栏布局：左侧整体为蓝色、右侧整体为白色，设置gap:0后仍存在边缘间隙，效果参考：

问题根源 #

该间隙和grid布局的gap属性无关，是**浏览器User Agent默认样式给body元素添加了8px的外边距（margin）**导致的，属于浏览器内置的默认样式规则，没有被自定义样式覆盖就会生效。
另外原有代码中给两个grid子项设置width:100%、height:100vh属于冗余设置，grid子项默认会拉伸占满分配到的网格单元格，手动设置满视口高度反而容易在添加内边距、边框时引发布局溢出。

修复代码 #

核心修改是给body添加margin:0清除默认外边距，优化后完整代码如下：

/* 建议提前加全局重置，避免其他默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #5FAAD9;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    /* 核心修复：清除浏览器默认外边距 */
    margin: 0;
}

#Record {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

#List {
    background-color: white;
}

关键修改点 #

• 给body设置margin: 0，清除浏览器默认的8px外边距，从根源消除边缘间隙
• 移除#Record、#List上冗余的宽高设置，利用grid子项默认拉伸特性填充区域，避免溢出问题
• 新增全局样式重置规则，统一清除所有元素的默认内外边距，设置box-sizing: border-box让内边距、边框不会撑大元素尺寸，减少后续布局异常

内容的提问来源于stack exchange，提问作者Hyejung