ASP.NET Core页面Body背景存在白边问题求助

问题定位 #

从你提供的代码来看，导致页面白边的核心问题有三个：

1. 视频元素的CSS选择器错误：页面中视频用的是id="video-bg"，但CSS里写的是类选择器.video-bg，导致全屏视频样式完全未生效。
2. 默认布局容器带内边距：ASP.NET Core默认模板的_Layout.cshtml通常会使用container类，该类自带左右内边距，是白边的常见来源。
3. HTML元素默认边距未清除：部分浏览器会给html元素设置默认margin/padding，未手动清除会导致白边。

具体修复步骤 #

1. 修正视频元素的CSS选择器

将CSS中的类选择器.video-bg改为id选择器#video-bg，确保样式作用到目标元素：

#video-bg {
    padding-left: 0px !important;
    padding-right: 0px !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    z-index: -1;
    object-fit: cover;
}

2. 清除HTML元素默认边距

在CSS中给html元素添加margin和padding清零规则：

html {
  font-size: 14px;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

3. 修改布局页面的容器设置

打开_Layout.cshtml，找到包裹页面内容的容器（通常是<div class="container">），将其改为无内边距的全屏容器container-fluid，或直接移除容器类：

<!-- 原默认容器代码 -->
<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

<!-- 修改为全屏无内边距容器 -->
<div class="container-fluid p-0">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

<!-- 或直接移除容器div -->
<main role="main" class="pb-3">
    @RenderBody()
</main>

4. 验证样式优先级

检查body和.no-margins类的样式，你现有代码已设置body { margin:0; padding:0; }和.no-margins { margin:0 !important; padding:0 !important; }，确保这些规则未被其他高优先级CSS覆盖即可。

测试验证 #

修改完成后刷新页面，视频应铺满整个视口，页面白边会被消除。若仍有残留白边，可打开浏览器开发者工具（F12）选中白边区域，查看是哪个元素的margin/padding导致的，针对性调整。

内容的提问来源于stack exchange，提问作者Marek Lukáč