Django前端开发：页面顶部与左侧不明空白问题求助

核心原因 #

浏览器默认会给<body>和<html>元素设置margin，这是导致顶部、左侧空白的主要原因；此外你的CSS未统一设置box-sizing，可能引发元素宽度计算偏差，再加上导航栏的z-index:-1会让它被其他内容遮挡，视觉上也会造成空白错觉。

修复步骤 #

1. 重置全局样式
   在CSS最顶部添加全局重置代码，消除浏览器默认边距并统一盒模型：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* 防止横向滚动条 */
}

2. 调整导航栏的层级
   将.navbar的z-index从-1改为较高数值，确保导航栏显示在最上层：

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    z-index: 999; /* 修改为999，确保导航栏在最上层 */
}

3. 修正视频容器宽度
   将.home-video的width:100vw替换为width:100%，避免和overflow-x:hidden冲突：

.home-video {
    position: relative;
    width: 100%; /* 替换100vw */
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

修复逻辑说明 #

• 全局重置代码直接消除了浏览器自带的<body>默认margin（通常为8px），解决顶部和左侧的基础空白问题。
• box-sizing:border-box让元素的padding和border不会额外增加宽度，避免导航栏因padding超出100%宽度。
• 调高导航栏的z-index后，它会显示在视频内容上方，不会被遮挡导致视觉上的空白。

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