设置width:100%的div左侧出现小边距，如何排查并解决？

原因分析 #

出现左侧小边距的核心问题是浏览器默认样式未重置：

• 几乎所有浏览器会给<body>标签设置默认margin（通常为8px），这会让页面整体偏移，导致固定定位的标题栏视觉上左侧出现间距；
• <h1>标签自带默认的外边距（margin），即使.headbar设置了padding:0，内部h1的外边距也会向外溢出，造成标题栏左侧的空白。

修复方法 #

提供两种可靠的修复方案，任选其一即可：

方案1：重置全局默认样式 #

通过清除body和内部h1的默认边距，从根源解决问题：

/* 重置body默认边距，消除页面整体偏移 */
body {
  margin: 0;
  padding: 0;
}

.headbar {
  background-color: #117FF2;
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 清除h1默认外边距，避免内部元素溢出 */
.headbar h1 {
  margin: 0;
  padding: 10px; /* 可选，给标题添加内边距，避免紧贴标题栏边缘 */
}

方案2：强制固定定位元素对齐视口左侧 #

给.headbar添加left:0属性，确保固定定位的元素从视口最左侧开始，同时清除h1的默认边距：

.headbar {
  background-color: #117FF2;
  position: fixed;
  top: 0;
  left: 0; /* 强制元素从视口左侧起始 */
  width: 100%;
  margin: 0;
  padding: 0;
}

.headbar h1 {
  margin: 0;
  padding: 10px;
}

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