如何移除Blazor页面内边距，使元素对齐左上角？

黄色盒子无法对齐页面左上角，核心原因是浏览器默认全局边距和MainLayout容器残留的内边距/外边距共同导致的。以下是具体解决步骤：

1. 重置浏览器默认全局样式 #

多数浏览器会给html、body标签设置默认的margin或padding，先在样式中清除：

html, body {
    margin: 0;
    padding: 0;
}

2. 清除MainLayout容器的边距 #

修改MainLayout.razor，确保main和article标签没有额外的内边距或外边距：

<main style="margin: 0; padding: 0;">
    <article style="margin: 0; padding: 0;">
        @Body
    </article>
</main>

如果偏好类样式而非内联样式，可定义全局类后应用：

.no-gap {
    margin: 0 !important;
    padding: 0 !important;
}

<main class="no-gap">
    <article class="no-gap">
        @Body
    </article>
</main>

3. 最终页面代码示例 #

将全局重置样式整合到你的页面代码中：

<div class="box1"></div>

<style>
    html, body {
        margin: 0;
        padding: 0;
        background-color: brown;
    }

    .box1 {
        width: 100%;
        height: 100px;
        background-color: yellow;
    }
</style>

完成以上修改后，黄色盒子即可完全对齐页面左上角。

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