Navbar周边出现空白间隙的原因排查咨询

我跟着YouTube教程实现Navbar，给.wrapper添加背景色#333333后，Navbar周边出现了空白间隙，和教程效果不一致。相关代码如下：

Navbar.js #

import "./navbar.scss";
import React from 'react';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import LanguageOutlinedIcon from '@mui/icons-material/LanguageOutlined';
import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
import FullscreenOutlinedIcon from '@mui/icons-material/FullscreenOutlined';
import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';
import ListOutlinedIcon from '@mui/icons-material/ListOutlined';

const Navbar = () => {
  return(
      <div className="navbar">
        <div className="wrapper">
          <div className="search">
            <input type="text" placeholder="Search..." />
            <SearchOutlinedIcon className="icon"/>
          </div>
          <div className="items">
            <div className="item">
              <LanguageOutlinedIcon className="icon"/>
              English
            </div>
            <div className="item">
              <DarkModeOutlinedIcon className="icon"/>
            </div>
            <div className="item">
              <FullscreenOutlinedIcon className="icon"/>
            </div>
            <div className="item">
              <NotificationsNoneOutlinedIcon className="icon"/>
            </div>
            <div className="item">
              <ListOutlinedIcon className="icon"/>
            </div>
          </div>
        </div>
      </div>
  )
}

export default Navbar;

navbar.scss #

.navbar{
  height: 67px;
  border-bottom: 0.5px solid rgb(231, 228, 228);
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #555;

  .wrapper {
    width: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #333333;

    .search {
      display: flex;
      align-items: center;
      border: 0.5px solid lightgray;

      input{
        border: none;
        outline: none;
        //background: transparent;
      }
    }

    .items{
      display:flex;
    }
  }
}

Home组件（调用Navbar处） #

import "./scss/home.scss";
import Sidebar from "./sidebar/Sidebar";
import Navbar from "./navbar/Navbar";

const Home = () => {
  return (
    <>
      <div className="home">
          <Sidebar/>
          <div className="homeContainer">
              <Navbar/>
              <div>
                  Home container
              </div>
          </div>
      </div>
    </>
  );
};

export default Home;

问题成因 #

1. 浏览器默认边距：浏览器会给<body>标签设置默认margin: 8px，导致页面整体和浏览器边缘有间隙，Navbar自然也会被这个默认样式影响。
2. 背景色层级错误：你把深色背景加在了.wrapper上，但.wrapper设置了padding: 0 20px，同时.navbar没有明确设置占满视口宽度，导致.wrapper的背景无法覆盖到页面边缘，看起来有空白。
3. 父容器额外间距：如果Home组件对应的.home或.homeContainer设置了padding/margin，也会让Navbar和页面边缘产生间隙。

修复方案 #

1. 清除浏览器默认样式 #

在项目的全局样式文件（比如index.css/global.scss）中添加基础重置样式，消除浏览器默认的边距：

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

body {
  margin: 0;
}

2. 调整Navbar的背景色层级 #

把深色背景从.wrapper移到.navbar上，同时确保.navbar占满视口宽度：

.navbar{
  height: 67px;
  border-bottom: 0.5px solid rgb(231, 228, 228);
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff; /* 把文字颜色改成白色，适配深色背景 */
  width: 100%; /* 确保Navbar占满视口宽度 */
  background: #333333; /* 把背景色移到这里 */

  .wrapper {
    width: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 移除这里的background */

    .search {
      display: flex;
      align-items: center;
      border: 0.5px solid lightgray;

      input{
        border: none;
        outline: none;
        background: transparent; /* 打开这个，让输入框背景和Navbar一致 */
        color: #fff; /* 输入文字改成白色 */
        padding: 4px; /* 可以加一点内边距，让输入框更美观 */
      }
    }

    .items{
      display:flex;
      gap: 16px; /* 给图标项之间加一点间距 */
    }

    .icon {
      cursor: pointer; /* 图标添加鼠标指针效果 */
    }
  }
}

3. 检查Home容器样式 #

打开home.scss，确保.home和.homeContainer没有额外的边距：

.home {
  display: flex;
  margin: 0;
  padding: 0;
}

.homeContainer {
  flex: 1;
  margin: 0;
  padding: 0;
}

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