CSS设置margin和padding为0后HTML容器仍存在间隙问题求助

问题原因 #

• 浏览器默认样式导致：主流浏览器默认会给 <body> 元素设置约8px的外边距，你仅对目标容器设置了margin: 0，没有清除父级元素的默认边距，就会出现四周间隙。
• 检查你写的CSS是否添加了正确的选择器：你贴出的CSS代码没有指定.main-container选择器，若实际代码也是如此，你写的边距清除样式根本不会生效。

解决代码 #

先添加全局默认样式重置，再写目标容器样式即可：

/* 全局样式重置，放在CSS文件最顶部 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 给父元素设置高度，否则子元素的百分比高度不生效 */
html, body {
  height: 100%;
}
/* 容器样式 */
.main-container {
  width: auto;
  height: 100%;
  background-color: rgb(207, 30, 30);
}

<div class="main-container">
TEST
</div>

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