Vue 3应用中神秘空白区域无法移除，求技术解决方案

步骤1：强制重置html和body全局默认样式 #

浏览器会默认给html、body设置隐性样式（比如部分浏览器的html { margin-top: 8px }，或者未设置高度导致无法占满视口），即使组件内边距边距设为0，也需要直接对根元素做全局重置：

/* 放在全局样式文件（如index.css）或Login.vue的非scoped样式块中 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* 可选：排查是否为滚动条导致的空白 */
}

注意：如果使用了<style scoped>，这段样式必须放在非scoped的样式块里，否则无法作用于html/body根元素。

步骤2：确保背景图容器占满视口 #

如果背景图设置在Login.vue的组件容器内，要保证容器本身铺满整个屏幕：

<template>
  <div class="login-wrapper">
    <!-- 登录页面内容 -->
  </div>
</template>

<style>
/* 全局样式段 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* 组件容器样式 */
.login-wrapper {
  width: 100vw;
  height: 100vh;
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center center;
}
</style>

如果用100%替代100vh/100vw，必须确保html、body的高度已设为100%，否则容器无法继承完整高度。

步骤3：排查第三方样式干扰 #

如果项目引入了第三方样式库（如Tailwind、Bootstrap），可通过Chrome审查工具的「Elements」面板查看html元素的计算样式，确认是否有未被覆盖的margin、padding或高度属性。若存在，可通过更高优先级的选择器或!important（尽量少用，优先通过层级覆盖）强制重置：

html {
  margin-top: 0 !important; /* 针对浏览器默认的顶部空白 */
}

额外排查点 #

• 检查页面开头是否缺失<!DOCTYPE html>声明，缺失会导致浏览器进入怪异模式，引发布局异常；
• 若设置overflow: hidden后空白消失，说明是内容溢出产生滚动条导致的空白，可调整内容高度或改用overflow-x: hidden/overflow-y: auto针对性处理。

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