Bootstrap5容器顶部边距无法消除的问题求助

问题重现 #

使用Bootstrap的container类时，容器顶部出现明显空白：

<div class="container">
  <!-- 内容 -->
</div>

尝试添加mt-0、mt-n5这类边距类后，空白依然存在：

<div class="container mt-0">
  <!-- 内容 -->
</div>

常见原因及解决方法 #

• 浏览器默认的body边距
  绝大多数浏览器会给body标签设置默认的margin: 8px，这是导致顶部空白的常见原因。解决方法：

  • 给body添加Bootstrap的m-0类：

    <body class="m-0">
      <div class="container">...</div>
    </body>
    

  • 或者自定义CSS重置：

    body {
      margin: 0;
      padding: 0;
    }
    

• 内部元素的外边距塌陷
  如果容器内的第一个元素设置了margin-top，会触发CSS外边距塌陷，导致容器顶部出现空白。解决方法：

  • 给容器添加overflow: hidden样式（或用Bootstrap的overflow-hidden类）：

    <div class="container overflow-hidden">...</div>
    

  • 把内部元素的margin-top替换为padding-top
  • 给容器添加极小的内边距，比如pt-1：

    <div class="container pt-1">...</div>
    

• 全局样式冲突
  检查项目中是否有自定义CSS或其他样式库给html、body或.container设置了额外的上边距/内边距，找到后调整对应样式即可。

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