为什么我的 Vue 模板有白色边框？答案

【问题标题】：Why does my Vue template have a white border?为什么我的 Vue 模板有白色边框？
【发布时间】：2022-11-27 05:57:43
【问题描述】：

有一项任务是开始为我的团队在 Vue 中开发一个页面，但我无法摆脱整个页面周围的白色边框。

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

<template>
  <body>
    <div></div>
  </body>
</template>

<style scoped>

* {
  padding: 0;
  margin: 0;
}

div {
  top: 0;
  left: 0;
  background: red;
  height: 50px;
}

</style>

在浏览器中看起来是一样的。据我所知，人们只是说这是身体的一些标准边距/填充。但是设置这些并没有改变任何东西。在我的main.ts 中，我有初始 Vue Hello World/Welcome 应用程序的残余，它导入一个 CSS 文件，该文件本身也导入另一个文件。但两者都是空的，删除初始导入也无济于事。

【问题讨论】：

使用html而不是*实际上在左右两侧添加了更多的空格。我也尝试过body，与*相比没有区别。
试试 html 或 body 而不是 *。另外，请检查您的开发工具以检查这个工具的确切来源。此外，您在这里使用的是 scoped，但该名称对您的项目来说应该是全局的。
@kissu 好吧，这显然是问题所在。删除了scoped，现在它触及了边缘。如果您想将其添加为带有解释的答案，我会接受。

标签： html css vue.js

【解决方案1】：

您需要在全局范围内应用边距/填充的重置，否则它将保留在您的组件范围内。
请从您的style 中删除the scoped，或者在您的文件树中将这种重置设置得更高。

另外，我建议不要使用 * CSS 选择器，因为它对性能的影响非常大。还请使用您的 devtools 检查器来查明为什么没有按照您的预期应用更改。

【讨论】：