如何消除Bootstrap 5网格的列、行间距，使图片铺满单元格？

1. 移除<figure>标签的默认边距 #

Bootstrap 的 <figure> 组件默认自带 margin-bottom: 1rem，这是你看到行之间蓝色间距的核心原因，需要覆盖该样式：

.algo figure {
  margin-bottom: 0;
}

2. 消除图片的基线间距 #

图片属于行内块元素，默认会与文本基线对齐，底部会产生微小间距，将图片设置为块级元素即可解决：

.ai {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block; /* 新增该属性 */
}

3. 完整消除Bootstrap网格行间距 #

给 <row> 标签添加 .g-0 类，确保同时消除列与行之间的间隙（你已设置列的内边距为0，这部分无需调整）：

<div class="row added-by-community g-0"> <!-- 新增.g-0类 -->

修改后的完整代码 #

CSS 代码 #

.ai {
  width: 100%;
  height: 100%;
  padding: 0px;
  display: block;
}

.algo {
  padding: 0px;
}

.algo figure {
  margin-bottom: 0;
}

HTML 代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid added-by-community">
  <div class="row added-by-community g-0">
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
  </div>
</div>

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