Vue新项目页面默认边距无法消除问题求助

核心问题分析 #

你踩了两个关键坑：

• Vue组件的<template>里不能直接写<body>标签——组件最终是挂载到页面已有的<body>内部节点上的，你写的<body>会被当成普通DOM元素解析，根本覆盖不了浏览器默认的页面根元素样式。
• 带scoped的样式只能作用于组件内部元素，碰不到页面真正的<html>和<body>标签，而浏览器默认给<body>加了margin: 8px（不同浏览器略有差异），这才是白色边框的源头。

修正步骤 #

1. 调整组件模板：删掉<template>里的<body>，用普通容器当根元素：

<script setup lang="ts">
</script>

<template>
  <div class="page-container"></div>
</template>

2. 配置全局样式：在全局CSS文件（比如style.css）或者App.vue的非scoped样式中添加以下代码，清除页面根元素的默认边距：

html, body {
  margin: 0;
  padding: 0;
}

.page-container {
  background: red;
  height: 50px;
}

如果不想单独维护全局CSS，也可以临时去掉当前组件的scoped属性（不推荐，容易污染全局样式），或者用:deep()伪类强制作用于根元素，但最规范的做法还是用全局样式处理页面根元素的默认样式。

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