设置width:100%的div未铺满全屏顶部存在留白如何解决

你当前使用的CSS代码如下：

.topbar {
    width: 100%;
    height: 10%;
    background-color: black;
}

实际页面效果：

排查解决步骤 #

• 第一步：重置浏览器默认样式
  浏览器默认会给html、body元素添加8px左右的默认外边距，这是导致四周留白、顶部有空隙的最常见原因。在CSS文件最顶部添加如下重置代码即可：

/* 全局重置所有元素默认内外边距，统一盒模型规则 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

如果不需要全局重置，也可以单独给根元素设置：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* 你的.topbar设置了10%的高度，需要父元素有明确高度，百分比高度才会正常生效 */
  height: 100%;
}

• 第二步：排查盒模型问题
  如果给.topbar额外添加了padding或者border属性，默认的content-box盒模型会把这两个值额外加到元素总宽度上，导致元素超出视口或者布局偏移。设置box-sizing: border-box后，width:100%会把内边距、边框都算进总宽度内，不会出现宽度溢出问题。
• 第三步：解决外边距折叠问题
  如果.topbar内部第一个子元素设置了margin-top属性，或者.topbar本身有非0的margin设置，会触发外边距折叠规则，导致顶部出现意外留白。可以通过给.topbar添加overflow: hidden、padding-top: 0.1px或者border-top: 1px solid transparent的方式规避折叠问题。
• 第四步：检查父元素样式
  如果.topbar的父元素不是body，需要确认父元素是否设置了padding或者margin，对应清除父元素的内边距即可。

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