Bootstrap5容器底部持续出现内边距问题求助，align-items-center无效

问题原因 #

你看到的底部"内边距"其实是两个默认样式导致的：

• Bootstrap给<p>标签默认设置了margin-bottom: 1rem，这部分外边距会延伸到容器底部，造成视觉上的内边距效果
• 浏览器默认给<body>元素添加了margin: 8px，也会让容器周围出现多余空间

align-items-center类是用来垂直对齐flex容器内的子元素，和容器本身的边距问题无关，所以用它解决不了这个问题。

解决方案 #

根据需求可以选择以下几种直接的处理方式：

1. 移除p标签的底部外边距 #

给所有<p>元素添加Bootstrap内置的mb-0类（作用是设置margin-bottom: 0）：

<div class="col-md-4 text-center">
    <p class="mb-0">lorem</p>
</div>

2. 重置body的默认外边距 #

如果页面整体存在多余边距，可以在自定义样式里清除body的默认外边距：

body {
    margin: 0;
}

3. 清除row的默认间距（可选） #

Bootstrap的row类默认带有左右负外边距，如果容器左右也存在多余空间，可以给row添加g-0类清除内部间距：

<section class="row g-0">

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/4b6937b5e3.js" crossorigin="anonymous"></script>
    <title>Test</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
   
    <div class="container-fluid bg-dark text-light">
        <section class="row">
            <div class="col-md-4 text-center">
                <p class="mb-0">lorem</p>
            </div>
            <div class="col-md-4 text-center">
                <p class="mb-0">lorem</p>
            </div>
            <div class="col-md-4 text-center">
                <p class="mb-0">lorem</p>
            </div>
        </section>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Luka Miljković