Bootstrap 5中不使用padding/margin调整div内元素位置的方法

1. 先解决底部留白问题 #

核心问题就是.features1的padding-bottom: 500px，直接处理这个样式就能消除留白：

• 直接修改原CSS：把.features1里的padding-bottom: 500px删掉或者改成0
• 无法改原CSS就用覆盖方式：给这个div加内联样式style="padding-bottom: 0 !important;"，或者写个自定义类.fix-padding { padding-bottom: 0 !important; }加到div上

2. 上移内部元素（不用padding/margin） #

要把h1等元素上移，又不想用padding/margin，试试这两种方法：

• transform位移：给需要上移的元素加自定义CSS类，比如.shift-up { transform: translateY(-30px); }，把这个类加到h1上，调整-30px的数值直到位置合适。这种位移不会改变元素的占位空间，不会影响整体布局。
• 利用布局属性调整：如果.features1是flex容器（Bootstrap很多组件默认带flex），给容器加align-items: flex-start;，让内部元素靠顶部对齐；如果是grid布局，给h1加align-self: start;，也能实现上移效果。

3. 排查Bootstrap类无效原因 #

之前用py、pb等类没效果，大概率是自定义的.features1选择器权重比Bootstrap内置类高。按F12打开浏览器开发者工具，查看元素的计算样式，确认是哪个样式在生效，再针对性用更高权重的选择器或者!important覆盖。

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