Bootstrap 5卡片布局：减少header与main、section容器与album间距

一、调整Header与Main之间的间距（线条A标注区域） #

Bootstrap 5里header和main的默认间距一般来自元素自带的margin或框架的spacing类，可通过两种方式调整：

• 用Bootstrap内置间距类：检查header是否带有mb-*类（比如mb-4），或是main带有mt-*类，直接修改类的数值，比如改成mb-2/mt-2，甚至用mb-0/mt-0完全消除间距，按需调整即可。
• 自定义CSS覆盖：如果内置类满足不了需求，添加自定义样式：

header {
  margin-bottom: 0.5rem; /* 替换为你需要的间距数值 */
}
/* 或者直接针对main调整 */
main {
  margin-top: 0.5rem;
}

二、调整Section与Album类之间的间距（线条B标注区域） #

section和.album容器的间距同样从margin属性入手：

• 检查并修改内置类：查看section是否有mb-*/mt-*类，或是.album带有mt-*类，把数值调小，比如将mt-5改为mt-2。
• 自定义CSS精细控制：添加如下样式实现精准调整：

section {
  margin-bottom: 0.5rem; /* 调整section底部间距 */
}
/* 或者直接针对.album容器 */
.album {
  margin-top: 0.5rem; /* 调整album顶部间距 */
}

实用提示 #

如果不确定间距的具体来源，打开浏览器开发者工具（F12），选中对应元素，查看Elements面板的Styles标签，找到margin/padding相关属性，定位样式来源后再针对性调整，效率更高。

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