Vue.js 2如何移除body标签的默认外边距？

架构老林

2026-5-15

解决Vue项目中body默认margin无法移除的问题

别担心，刚接触Vue遇到这种小问题太正常啦！我来帮你搞定这个body外边距的问题～

你之前尝试的方法没生效，大概率是因为样式作用域或者优先级的问题，下面给你几个靠谱的解决思路：

方法一：全局引入重置样式文件

这是最规范的做法，适合后续统一管理全局样式：

在项目的src/assets文件夹下新建一个reset.css文件，写入重置样式：

/* 全局重置样式，解决body默认margin问题 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 可选，方便后续盒模型计算 */
}
body {
  margin: 0;
}

打开项目入口文件main.js，引入这个重置样式：

import './assets/reset.css'

这样样式会全局生效，覆盖浏览器的默认样式。

方法二：在App.vue中写无作用域的全局样式

如果你不想单独建文件，可以直接在根组件App.vue的<style>标签里写全局样式，但一定要去掉scoped属性：

<template>
  <div id="app">
    <!-- 你的组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 注意这里不要加scoped！ */
body {
  margin: 0;
}
/* 也可以加上全局重置 */
* {
  margin: 0;
  padding: 0;
}
</style>

为什么要去掉scoped？因为加了scoped的样式会被Vue添加专属属性前缀，只会作用于当前组件内的DOM元素，而body是全局元素，不会带有这个前缀，所以scoped里的body样式根本不会生效——这很可能就是你之前失败的原因！