如何延伸带指定背景色的矩形div以去除周围白边

你看到的白色边缘并非div自身的边距，是浏览器默认给<body>标签添加的8px外边距导致的。所有现代浏览器都会自带一套基础默认样式，给页面根元素加上边距、内边距、默认字体等设置，这套默认边距会把整个页面内容向内挤压，导致你设置的灰色背景div无法贴到视口边缘，露出外围一圈白色的body默认背景。

不需要修改div本身的已有样式，只要清除body的默认外边距即可：

/* 清除浏览器自带的body默认边距 */
body {
  margin: 0;
  /* 可选配置：如果希望整个页面都不会在div区域外露出白边，可以给body设置和div一致的灰色背景 */
  background-color: #808080;
}

#top-div作为块级元素，默认宽度就是父容器（即body）的100%。当body的默认边距被清除后，div会自动撑满页面横向宽度，贴合视口的最左、最右、最顶部边缘，原本的白边就会消失。
如果需要让灰色div占满整个首屏视口高度，避免底部露出白边，可以额外给div补充高度规则：

#top-div {
  background-color: #808080;
  /* 按首屏视口高度撑满，不会因为内容少出现底部白边 */
  min-height: 100vh;
}

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