VS Code使用live-server时HTML h1、h2标签默认margin/padding等CSS样式丢失

首先确认页面字体是否为你设置的Rubik，如果是说明style.css加载正常，可排除文件路径错误问题，再按以下方案排查：

可能原因 #

• 浏览器扩展注入了全局样式重置代码：广告拦截、主题修改、CSS调试类扩展都可能自动给页面注入* { margin:0; padding:0 }这类重置规则，覆盖浏览器默认样式
• live-server缓存了旧样式文件：你修改style.css后未清空缓存，实际运行时加载的是之前写过样式重置的旧CSS文件
• 浏览器开启了特殊浏览模式：部分浏览器的阅读模式、极简模式、省流模式会自动覆盖HTML原生标签的默认样式

验证步骤 #

1. 按F12打开浏览器开发者工具，选中样式异常的h1/h2标签，查看「样式」面板的规则列表：
   • 如果出现margin:0/padding:0的通配符规则，看来源标注是第三方扩展还是本地CSS文件即可定位问题
   • 如果user agent stylesheet（浏览器内置默认样式）被划掉，说明被优先级更高的自定义规则覆盖
2. 直接在本地文件夹双击打开HTML文件，不通过live-server启动，如果样式恢复正常，就是live-server缓存问题，启动时加--no-cache参数即可禁用缓存
3. 用浏览器无痕模式打开页面，如果样式恢复正常，就是浏览器扩展导致的问题，逐一禁用可疑扩展排查即可

临时兜底方案 #

如果排查后无法定位根因，可以手动写入浏览器默认样式规则兜底，在style.css开头添加以下代码即可：

h1 {
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  font-weight: bold;
}
h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  font-weight: bold;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

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