如何让HTML元素完全覆盖屏幕边缘无空隙？

我制作了一个section列表，想要让它完全覆盖页面左侧，但目前元素和屏幕左边缘之间留有空隙。
（截图说明：页面左侧的深蓝色div与屏幕左边界存在明显间距）

请问该如何修复这个问题？

现有代码 #

CSS代码 #

#sectionList {
    background-color: #131067;
    height: 100%;
    width: 500px;
}

HTML代码 #

<div id="sectionList"></div>

这个空隙来自浏览器默认的<body>标签边距，绝大多数浏览器会给body设置margin: 8px的默认样式；同时如果你的div要占满整个页面高度，还需要确保html和body的高度被正确设置为100%。

方案一：全局重置样式（推荐） #

添加全局重置代码，消除浏览器默认的边距、内边距，同时确保页面高度能被div继承：

/* 重置全局默认样式 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#sectionList {
    background-color: #131067;
    height: 100%;
    width: 500px;
    /* 若需要列表固定在左侧不随页面滚动，可添加以下两行 */
    position: fixed;
    left: 0;
}

方案二：快速修复左侧空隙 #

如果只需要解决左侧间距问题，不需要全局重置，直接清除body的左侧边距即可：

body {
    margin-left: 0;
}

#sectionList {
    background-color: #131067;
    height: 100%;
    width: 500px;
}

注意：如果你的div高度没有铺满整个页面，必须给html和body设置height: 100%，否则#sectionList的height: 100%只会继承父元素的默认高度，无法实现全屏效果。

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