MudBlazor删除AppBar后，如何移除页面顶部留白边距？

架构老林

2026-8-11

移除MudBlazor模板删除AppBar后的顶部边距

问题描述

创建MudBlazor模板项目后，删除了顶部的<MudAppBar>组件，但页面内容仍保留着AppBar存在时的顶部留白，无法顶格显示。

现有代码

<MudLayout>
@*    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank" />
        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank" />
    </MudAppBar>*@
    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">MudBlazorTemplates1</MudText>
        </MudDrawerHeader>
        <NavMenu />
    </MudDrawer>
    <MudMainContent>
        @*<MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16">*@
        <MudContainer MaxWidth="MaxWidth.Large">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

问题效果

页面顶部留白效果

解决方法

MudBlazor的<MudLayout>组件会自动检测是否存在<MudAppBar>，并给<MudMainContent>添加默认的顶部外边距以避免内容被AppBar遮挡。删除AppBar后，这个默认边距不会自动移除，可通过以下方式调整：

方法一：直接给MudMainContent添加样式类
修改<MudMainContent>标签，添加Class="mt-0"覆盖默认的顶部外边距：
```
<MudMainContent Class="mt-0">
    <MudContainer MaxWidth="MaxWidth.Large">
        @Body
    </MudContainer>
</MudMainContent>
```
方法二：自定义全局CSS
如果需要全局生效，在项目的CSS文件（比如wwwroot/css/app.css）中添加以下样式：
```
.mud-main-content {
    margin-top: 0 !important;
}
```
额外检查
确认<MudContainer>没有保留额外的顶部内边距（比如你已经注释掉的pt-16），确保容器本身没有多余间距。