如何解决给div设置background-color后背景色周围存在空白的问题

原因1：浏览器默认body外边距未清除 #

主流浏览器默认会给<body>元素设置约8px的外边距，仅给目标div设置margin: 0不会清除父级body的默认边距，因此div周围会出现一圈空白。
修复代码：

body {
  margin: 0;
}

原因2：子元素外边距塌陷 #

如果div内部存在<h1>、<p>这类自带默认上下外边距的块级子元素，子元素的外边距会穿透父级div，导致div看起来上下有空白，背景没有覆盖到对应范围。
修复方法：给目标div添加任意一种以下属性即可解决塌陷：

• 新增overflow: hidden
• 新增padding: 0（不需要内边距时使用）
• 新增border: 1px solid transparent
  修复后示例：

#div {
    background-color: black;
    margin: 0;
    overflow: hidden; /* 新增属性解决塌陷 */
}

原因3：未设置占满视口的尺寸 #

如果你需要div的黑色背景铺满整个浏览器窗口，需要额外给html、body以及div设置全屏高度：

html, body {
  margin: 0;
  height: 100%;
}
#div {
    background-color: black;
    margin: 0;
    height: 100%;
}

原因4：选择器匹配错误 #

当前使用的#div是ID选择器，仅能匹配HTML中id="div"的元素。如果需要给所有<div>标签应用样式，要将选择器改为标签选择器div；如果是匹配指定类名的div，改为类选择器.你的类名，确保样式正确命中目标元素。

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