如何在CSS&HTML中消除图片间距并填充空白区域？

以下是几个针对性的解决步骤，直接套用就能解决问题：

• 移除Bootstrap列的默认内边距
  Bootstrap的.col-*类默认自带左右内边距（padding-left/padding-right），这是图片间空白的核心来源之一。你可以给包裹列的.row容器添加Bootstrap自带的.no-gutters类，直接消除列的内边距：

  <div class="row no-gutters">
    <div class="col-6 timeline-item">
      <img src="your-image.jpg" alt="...">
    </div>
    <!-- 其他图片列 -->
  </div>
  

  如果.no-gutters不生效，也可以自定义CSS强制覆盖：

  .timeline-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  

• 强制图片填满容器并消除自身间距
  图片默认是inline-block元素，会自带字符间距，同时如果尺寸不足会留空白。给图片添加以下样式：

  .timeline-item img {
    display: block; /* 转为块级元素消除字符间距 */
    width: 100%; /* 强制填满父容器宽度 */
    margin: 0; /* 清除图片自身margin */
    object-fit: cover; /* 可选：让图片按比例填满容器，避免拉伸变形 */
  }
  

• 修正flex布局的子项设置
  如果你用flex布局实现每行两张，确保父容器的flex属性正确，同时子项的宽度设置准确：

  .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0; /* 清除row默认的负margin（如果不需要的话） */
  }
  .timeline-item {
    flex: 0 0 50%; /* 强制占满每行的一半宽度 */
    max-width: 50%; /* 配合flex属性确保宽度不溢出 */
    padding: 0;
  }
  

• 检查是否有其他全局样式干扰
  排查一下是否有全局的img样式或者.timeline-item的其他父级样式添加了margin/padding，用浏览器的开发者工具（F12）查看元素的盒模型，找到多余的间距来源，针对性覆盖。

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