如何消除Laravel+Vue+Inertia中认证布局与其他组件的间距

排查与解决步骤 #

• 重置基础样式：先清除body和html的默认边距，避免浏览器自带样式引发间距：

  body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

• 检查布局组件样式：查看认证布局和仪表盘页面的根容器元素，确认是否存在margin-top或padding-top属性。若布局外层容器有默认间距样式，直接将其设为0：

  <!-- 修改认证布局根容器样式示例 -->
  <template>
    <div class="auth-layout" style="margin-top: 0;">
      <!-- 原有布局内容 -->
    </div>
  </template>
  

• 定位冲突样式：用浏览器开发者工具（F12）选中间距区域，在Elements面板查看触发间距的CSS规则，找到对应选择器后针对性修改。比如发现是mt-*这类CSS框架类导致，直接移除即可。
• 排查嵌套布局冲突：如果使用多层布局嵌套（如AuthLayout嵌套在全局布局中），确认父布局是否给子布局添加了额外间距，找到后调整或移除相关样式。

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